jQuery $.post() 方法使用案例

港控/mmm° 2022-06-07 09:11 145阅读 0赞

**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" "http://www.w3.org/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 + "," + data.realname);
    				//当第四个参数设置为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 = request.getParameter("name");
    		String pwd = request.getParameter("pwd");
    		System.out.println(name + "," + pwd);
    		// 响应信息（模拟json字符串格式返回）
    		PrintWriter out = response.getWriter();
    		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)

<table> 
 <tbody> 
  <tr> 
   <th style="width:35%"><span style="font-size:18px">参数</span></th> 
   <th><span style="font-size:18px">描述</span></th> 
  </tr> 
  <tr> 
   <td><em><span style="font-size:18px">url</span></em></td> 
   <td><span style="font-size:18px">必需。规定把请求发送到哪个 URL。</span></td> 
  </tr> 
  <tr> 
   <td><em><span style="font-size:18px">data</span></em></td> 
   <td><span style="font-size:18px">可选。映射或字符串值。规定连同请求发送到服务器的数据。</span></td> 
  </tr> 
  <tr> 
   <td><em><span style="font-size:18px">success(data, textStatus, jqXHR)</span></em></td> 
   <td><span style="font-size:18px">可选。请求成功时执行的回调函数。</span></td> 
  </tr> 
  <tr> 
   <td><em><span style="font-size:18px">dataType</span></em></td> 
   <td> <p><span style="font-size:18px">可选。规定预期的服务器响应的数据类型。</span></p> <p><span style="font-size:18px">默认执行智能判断（xml、json、script 或 html）。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### 详细说明 ###

该函数是简写的 Ajax 函数，等价于：

$.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

对于 jQuery 1.5，也可以向 success 回调函数传递  jqXHR 对象（jQuery 1.4 中传递的是 XMLHttpRequest 对象）。

大部分实现会规定一个 success 函数：

$.post("ajax/test.html", function(data) {
      $(".result").html(data);
    });

本例读取被请求的 HTML 片段，并插入页面中。

通过 POST 读取的页面不被缓存，因此  jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的.ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

## jqXHR 对象 ##

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由$.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序，请记住该请求针对 jqxhr 对象
        var jqxhr = $.post("example.php", function() {
          alert("success");
        })
        .success(function() { alert("second success"); })
        .error(function() { alert("error"); })
        .complete(function() { alert("complete"); });
    
        // 在这里执行其他任务
    	
        // 为上面的请求设置另一个完成函数
        jqxhr.complete(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");