四个 Ajax 请求方法
$.ajax 方法
$.get 方法
$.post 方法
$.getJSON 方法
一个表单序列化方法
serialize()表单序列化方法
如何使用上面的五个方法：
在 JQuery 中和 Ajax 请求有关的方法有四个
$.ajax 请求参数
url： 请求的地址
type : 请求的方式 get 或 post
data : 请求的参数 string 或 json
success: 成功的回调函数
dataType: 返回的数据类型 常用 json 或 text
下面的方法必须遵守参数的顺序
$.get 请求和$.post 请求
url:请求的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text
Jquery 的$.getJSON
url:待载入页面的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
表单的序列化
serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去 我们很多不必要的工作。
由于$.get、$.post 和 getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所 以我们以$.ajax()方法的使用为示例进行展示：
1）Jquery_Ajax_request.html 的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ // ajax 请求 $("#ajaxBtn").click(function(){ $.ajax({ url : "ajaxServlet", // 请求地址 error:function(){ // 请求失败回调 alert("请求失败"); }, success:function(data){ // 请求成功回调 alert( data ); }, type:"POST", // 请求的方式 dataType:"json", // 返回的数据类型为 json 对象 data:{ // 请求的参数 action:"jqueryAjax", a:12, date: new Date() } }); }); // ajax--get 请求 $("#getBtn").click(function(){ $.get( "ajaxServlet",{ action:"jqueryGet", a:12, date:new Date() },function(data){alert(data);},"json" ); }); // ajax--post 请求 $("#postBtn").click(function(){ // post 请求 $.post( "ajaxServlet", // 请求路径 { // 请求参数 action:"jqueryPost", a:12, date:new Date() }, function(data){ alert( data ) }, // 成功的回调函数 "text" // 返回的数据类型 ); }); // ajax--getJson 请求 $("#getJsonBtn").click(function(){ // 调用 $.getJSON( "ajaxServlet", // 请求路径 { // 请求参数 action:"jqueryGetJSON", a:12, date:new Date() }, function(data){ alert( data ) } // 成功的回调函数 ); }); // ajax 请求 $("#submit").click(function(){ // 把参数序列化 var data = $("#form01").serialize(); alert(data); }); }); </script> </head> <body> <div> <button id="ajaxBtn">$.ajax 请求</button> <button id="getBtn">$.get 请求</button> <button id="postBtn">$.post 请求</button> <button id="getJsonBtn">$.getJSON 请求</button> </div> <br/><br/> <form id="form01" > 用户名：<input name="username" type="text" /><br/> 密码：<input name="password" type="password" /><br/> 下拉单选：<select name="single"> <option value="Single">Single</option> <option value="Single2">Single2</option> </select><br/> 下拉多选： <select name="multiple" multiple="multiple"> <option selected="selected" value="Multiple">Multiple</option> <option value="Multiple2">Multiple2</option> <option selected="selected" value="Multiple3">Multiple3</option> </select><br/> 复选： <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/> 单选： <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2<br/> <input id="submit" type="submit" /> </form> </body> </html>
2)AjaxServlet 的代码如下：
public class AjaxServlet extends BaseServlet { private static final long serialVersionUID = 1L; protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("ajax 请求过来了 a--" + request.getParameter("a")); Random random = new Random(System.currentTimeMillis()); // 使用随机数，可以让客户端看到变化 response.getWriter().write( new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312"))); } protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("jqueryAjax 请求过来了 a--" + request.getParameter("a")); Random random = new Random(System.currentTimeMillis()); // 使用随机数，可以让客户端看到变化 response.getWriter().write( new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312"))); } protected void jqueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("jqueryGet 请求过来了 a--" + request.getParameter("a")); Random random = new Random(System.currentTimeMillis()); // 使用随机数，可以让客户端看到变化 response.getWriter().write( new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312"))); } protected void jqueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("jqueryPost 请求过来了 a--" + request.getParameter("a")); Random random = new Random(System.currentTimeMillis()); // 使用随机数，可以让客户端看到变化 response.getWriter().write( new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312"))); } protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("jqueryGetJSON 请求过来了 a--" + request.getParameter("a")); Random random = new Random(System.currentTimeMillis()); // 使用随机数，可以让客户端看到变化 response.getWriter().write( new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312"))); } }
