1. $.post()方法通过HTTP POST请求从服务器载入数据。
2. $.post()方法请求成功时可调用回调函数。
3. 语法
$.post(url,data,funxtion(response, textStatus, jqXHR),dataType)4. 参数
5. jqXHR对象
5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest对象的超类。$.post()方法返回的也是XMLHTTPRequest对象的超类, 实现了约定的接口, 赋予其所有的属性、方法, 以及约定的行为。出于对由$.ajax()方法使用的回调函数名称便利性和一致性的考虑, 它提供了error(), success()以及complete()方法。
// 请求生成后立即分配处理程序, 请记住该请求针对jqxhr对象
var jqXHR = $.post("login.action", function(response, textStatus, jqXHR) {
})
.success(function(response,textStatus,jqXHR) {
})
.error(function(jqXHR,textStatus,error) {
})
.complete(function(jqXHR,textStatus) {
});6. 例子
6.1. 新建一个名叫jQueryAjaxPost的动态WEB工程
6.2. 新建index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery-Ajax的post()方法</title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
var jqXHR = $.post("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){
$("#result").text(response);
});
console.log(jqXHR);
});
$('#btn2').click(function(){
$.post("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){
$("#result").text(response);
console.log('-------Start-------------');
console.log('-------End-------------');
})
.success(function(response,textStatus,jqXHR) {
console.log('-------success Start-------------');
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
console.log('-------success End-------------');
})
.error(function(jqXHR,textStatus,error) {
console.log('-------error Start-------------');
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
console.log('-------error End-------------');
})
.complete(function(jqXHR,textStatus) {
console.log('-------complete Start-------------');
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
console.log('-------complete End-------------');
});
});
$('#btn3').click(function(){
$.post("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){
var data = $(response);
$("#result").text('code=' + data.find('code').text() + ',info=' + data.find('info').text() + ',msg=' + data.find('msg').text());
}, "xml");
});
$('#btn4').click(function(){
$.post("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){
$("#result").text('code=' + response.data.code + ',info=' + response.data.info + ',msg=' + response.data.msg);
}, "json");
});
});
</script>
<style type="text/css">
div {
width: 450px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="result">结果区域</div><br />
<button id="btn1">post方法请求获取xml数据</button> <button id="btn2">post方法请求获取json数据</button><br /><br />
<button id="btn3">post方法规定服务器响应xml数据</button> <button id="btn4">post方法规定服务器响应json数据</button>
</body>
</html>6.3. 新建test.xml
<?xml version="1.0" encoding="UTF-8"?>
<data>
<code>1</code>
<info>success</info>
<msg>请求成功。</msg>
</data>6.4. 新建text.json
{"data": {"code": 1, "info": "success", "msg": "请求成功。"}}6.5. 新建JqueryAjaxPost.java
package com.rjbd.jap;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JqueryAjaxPost extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
String videoName = req.getParameter("videoName");
String lession = req.getParameter("lession");
String dataType = req.getParameter("dataType");
System.out.println("id = " + id + ", videoName = " + videoName + " , lession = " + lession + " , dataType = " + dataType);
FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));
BufferedReader br = new BufferedReader(fr);
StringBuffer sb = new StringBuffer();
String result = null;
while((result = br.readLine()) != null) {
sb.append(result);
}
br.close();
fr.close();
// 响应客户端的内容类型是text/plain 编码是UTF-8(包含字符编码和网页编码)
resp.setContentType("text/plain;charset=UTF-8");
resp.getWriter().write(sb.toString());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}6.6. 修改web.xml
6.7. 运行项目