JQuery 的 Ajax 请求(重点****)
【摘要】 四个 Ajax 请求方法$.ajax 方法$.get 方法$.post 方法$.getJSON 方法一个表单序列化方法serialize()表单序列化方法如何使用上面的五个方法：在 JQuery 中和 Ajax 请求有关的方法有四个$.ajax 请求参数url： 请求的地址type : 请求的方式 get 或 postdata : 请求的参数 string 或 jsonsuccess: 成...
四个 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")));
}
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）