jQuery$.post（）⽅法使⽤案例
jQuery post() ⽅法使⽤案例
注：需要引⼊jquery⽂件，本案例使⽤的是 jquery-2.0.0.js
1、post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
/*  当密码框失去焦点时，触发post异步请求 */
$("#pwd").blur(function() {
$.post("login.do", {
name : $("#name").val(),
pwd : $("#pwd").val()
}, function(data) {
alert(data.uid + "," + alname);
//当第四个参数设置为json时，不需要⼿动解析，⽽是由jquery框架帮助我们实现了解析
}, "json");
});
});
</script>
</head>
<body>
<form>
⽤户名： <input type="text" name="name" id="name"><br /> 密码： <input
type="password" name="pwd" id="pwd"><br />
</form>
</body>
</html>
2、UserServlet.java
@WebServlet("/login.do")
public class PostServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 接收中⽂乱码处理
request.setCharacterEncoding("UTF-8");
// 响应中⽂乱码处理
response.setContentType("text/html; charset=UTF-8");
// 接收⽤户输⼊
String name = Parameter("name");
String pwd = Parameter("pwd");
System.out.println(name + "," + pwd);
// 响应信息（模拟json字符串格式返回）
PrintWriter out = Writer();
out.write("{\"uid\":1,\"realname\":\"张三\"}");
out.flush();
out.close();
}
}
详细的的⽅法说明参考w3school
jQuery ajax - post() ⽅法
实例
请求 test.php ⽹页，忽略返回值：
$.post("test.php");
TIY 实例
通过 AJAX POST 请求改变 div 元素的⽂本：
$("input").keyup(function(){
txt=$("input").val();
$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
$("span").html(result);
});
});
定义和⽤法
post() ⽅法通过 HTTP POST 请求从服务器载⼊数据。
语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。success(data, textStatus, jqXHR)可选。请求成功时执⾏的回调函数。
可选。规定预期的服务器响应的数据类型。
dataType
默认执⾏智能判断（xml、json、script 或 html）。
详细说明
该函数是简写的 Ajax 函数，等价于：
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、⽂本字符串、JavaScript ⽂件或者 JSON 对象。也可向 success 回调函数传递响应的⽂本状态。
对于 jQuery 1.5，也可以向 success 回调函数传递 （jQuery 1.4 中传递的是 XMLHttpRequest 对象）。
⼤部分实现会规定⼀个 success 函数：
$.post("ajax/test.html", function(data) {
$(".result").html(data);
});
本例读取被请求的 HTML ⽚段，并插⼊页⾯中。
通过 POST 读取的页⾯不被缓存，因此 中的 cache 和 ifModified 选项不会影响这些请求。
注释：由于浏览器安全⽅⾯的限制，⼤多数 "Ajax" 请求遵守同源策略；请求⽆法从不同的域、⼦域或协议成功地取回数据。
注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提⽰，除⾮脚本已调⽤了全局的。或者对于jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() ⽅法也可以⽤于错误处理。
jqXHR 对象
对于 jQuery 1.5，所有 jQuery 的 AJAX ⽅法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接⼝，赋予其所有的属性、⽅法，以及约定的⾏为。出于对由 使⽤的回调函数名称便利性和⼀致性的考虑，它提供了 .error(), .success() 以及 plete() ⽅法。这些⽅法使⽤请求终⽌时调⽤的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。
jQuery 1.5 中的约定接⼝同样允许 jQuery 的 Ajax ⽅法，包括 $.post()，来链接同⼀请求的多个 .success()、
plete() 以及 .error() 回调函数，甚⾄会在请求也许已经完成后分配这些回调函数。
// 请求⽣成后⽴即分配处理程序，请记住该请求针对 jqxhr 对象
var jqxhr = $.post("example.php", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
plete(function() { alert("complete"); });
// 在这⾥执⾏其他任务
// 为上⾯的请求设置另⼀个完成函数
jqxhrplete(function(){ alert("second complete"); });
更多实例
例⼦ 1
请求 test.php 页⾯，并⼀起发送⼀些额外的数据（同时仍然忽略返回值）：
$.post("test.php", { name: "John", time: "2pm" } );
例⼦ 2
向服务器传递数据数组（同时仍然忽略返回值）：
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
例⼦ 3
使⽤ ajax 请求发送表单数据：
$.post("test.php", $("#testform").serialize());
例⼦ 4
输出来⾃请求页⾯ test.php 的结果（HTML 或 XML，取决于所返回的内容）：
$.post("test.php", function(data){
alert("Data Loaded: " + data);
});
例⼦ 5
向页⾯ test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
例⼦ 6
获得 test.php 页⾯的内容，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进⾏处理：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");
例⼦ 7
获得 test.php 页⾯返回的 json 格式的内容：
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); //  2pm
}, "json");
jquery框架原理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。