ajax(jQuery)學習筆記

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

資料連結：

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/

servlet所需jar包-打包：

http://download.csdn.net/detail/zhengsihan/5879285

代碼：

http://download.csdn.net/detail/zhengsihan/5879555

servlet:（最煩就是json用到的包，上面已經打包好了）

package org.minus.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import net.sf.json.JSONObject;@WebServlet(description = "for e-mail sending", urlPatterns = { "/mail.do" })public class EmailServ extends HttpServlet {private static final long serialVersionUID = 1L;    public EmailServ() {}protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("進入servlet_" + new Date());resp.setCharacterEncoding("UTF-8");resp.setContentType("text/plain");String name = req.getParameter("name");String age = req.getParameter("age");System.out.println("接收到的name為："  + name + "，age為：" + age);JSONObject jObj = new JSONObject();JSONArray ary = new JSONArray();JSONObject member = null;//jObj.put("memo", "hello");//返回單個資訊//jObj.put("spy", "snowden");for(int i = 0; i < 5; i++){member = new JSONObject();member.put("memo", "hello_" + i);member.put("spy", "snow_" + i);ary.add(member);}jObj.put("returns", ary);PrintWriter pw = resp.getWriter();pw.write(jObj.toString());pw.flush();}}

js事件（用了jQuery）：

$(document).ready(function(){$('#emailBtn').click(function(){$('div').load('component/email-form.html');});$('#ajaxBtn').click(function(){alert('out');$.ajax({type:'POST',url:'mail.do',cache:false,success:function(json){}});});$('#getBtn').click(function(){$.get('mail.do',{"name":"zsh","age":"18"},function(data, status){var returns = data.returns;var memo;var spy;for(var i = 0; i < returns.length; i++){memo = returns[i].memo;spy = returns[i].spy;alert('第'+(i+1)+'個訊息：'+memo+'\t'+spy);};},'json');});$('#postBtn').click(function(){$.post('mail.do',function(data){alert('$.post成功返回');});});});

drop-item.html(下拉式功能表元素調換)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>下拉式清單測試</title><style type="text/css">select,ul{float:left;}ul{padding:0;text-align:center;}ul li{float:none;list-style:none;}</style><script type="text/javascript" src="../js/jquery-2.0.3.min.js" ></script><script type="text/javascript">$(document).ready(function(){$('option').click(function(){});$('#toRight').click(function(){var $selectedItem = $('#boxLeft option:selected');$selectedItem.appendTo('#boxRight');});$('#toLeft').click(function(){var $selectedItem = $('#boxRight option:selected');$selectedItem.appendTo('#boxLeft');});$('#all2right').click(function(){var $selectedItem = $('#boxLeft option');$selectedItem.appendTo('#boxRight');});$('#all2Left').click(function(){var $selectedItem = $('#boxRight option');$selectedItem.appendTo('#boxLeft');});});</script></head><body><form><select id="boxLeft" multiple="multiple" style="width:100px;height:160px;"><option value="1">alpha</option><option value="2">beta</option><option value="3">cruise</option></select><ul><li><input type="button" id="all2right" value="ALL ->" /></li><li><input type="button" id="toRight" value="->" /></li><li><input type="button" id="toLeft" value="<-" /></li><li><input type="button" id="all2Left" value="<- ALL" /></li></ul><select id="boxRight" multiple="multiple" style="width:100px;height:160px;"></select></form></body></html>

$.getScript

$('#ddd').click(function(){var $newBtn = $("<input type='button' id='TEST' value='Click Me!' />");//$('#btns').append($newBtn);$(this).after($newBtn);$.getScript('js/ddd.js', function(){alert('js已載入');});});

$.each

$('#each').click(function(){var $btns = $('input');$btns.each(function(i, btn){//i是數組下標，btn是每個按鈕。注意，btn並不是jQuery對象，所以下面做了轉換var $btn = $(btn);alert($btn.val());});});

$.jsonp + $.ajax

jsonp相關資料：

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

$(document).ready(function(){$('#ajaxBtn').click(function(){//$.ajax({type:'POST',url:'mail.do',cache:false,success:function(json){}});//$.getJSON('mail.do',function(data){});$.ajax({type:'post',timeout:3000,async:false,url:'http://localhost:8080/ajaxtest/mail.do',data:{'name':'zsh','age':'28'},dataType:'JSONP',jsonp:'callback',jsonpCallback:'theHandler',success:function(data){alert(data);},error:function(){alert('error');}});});});

servlet代碼

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(new Date());resp.setCharacterEncoding("UTF-8");resp.setContentType("text/javascript");String output = req.getParameter("callback")+"(\'這是JSONP的返回資料\');";PrintWriter pw = resp.getWriter();pw.write(output);pw.flush();}

$.serialize

$.serializeArray

$.param

.extend

.on

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More