029-jQuery Ajax的post方法

1. $.post()方法通过HTTP POST请求从服务器载入数据。

2. $.post()方法请求成功时可调用回调函数。

3. 语法

$.post(url,data,funxtion(response, textStatus, jqXHR),dataType)

4. 参数

029-jQuery Ajax的post方法

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工程

029-jQuery Ajax的post方法

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

029-jQuery Ajax的post方法

6.7. 运行项目

029-jQuery Ajax的post方法

上一篇:029. Python多态介绍


下一篇:私有方法_20201209201436(学习 Java 编程语言 029)