jQuery.post()



jQuery.post( url [, data ] [, success ] [, dataType ] )Returns:jqXHR

Description: Load data from the server using a HTTP POST request.

  • version added:1.0jQuery.post(
    url [, data ] [, success ] [, dataType ] )

    • url
      Type: String
      A string containing the URL to which the request is sent.
    • //解释一下:URL是必选的參数,其余參数可选。URL是request请求的路径。

    • data
      A plain object or string that is sent to the server with the request.
    • //解释一下:data是浏览器通过request请求向server发送一些參数。这个參数的类型能够是字符串类型。也但是plainObject类(感觉和Java中Object差点儿相同)。
    • success
      Type: Function( Object data,String textStatus,jqXHR jqXHR )
      A callback function that is executed if the request succeeds. Required ifdataType is provided, but can benull in that case.
    • //解释一下:success是request请求成功后触发的回调函数。

    • dataType
      Type: String
      The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
    • //解释一下:dataType是从server返回的类型,能够是XML、json、script、text、HTML。

This is a shorthand Ajax function, which is equivalent to:

1
2
3
4
5
6
7
  1. $.ajax({
  2.  
  3. type: "POST",
  4.  
  5. url: url,
  6.  
  7. data: data,
  8.  
  9. success: success,
  10.  
  11. dataType: dataType
  12.  
  13. });
  14.  

The success callback function is passed the returned data, which will be an XML root element or a text string depending on the MIME type of the response. It is also passed the text status of the response.

//解释一下:上面的$.post能够用$.ajax来替代。

As of jQuery 1.5, the success callback function is also passed a"jqXHR" object (injQuery 1.4,
it was passed the XMLHttpRequest object).

Most implementations will specify a success handler:

1
2
3
  1. $.post( "ajax/test.html", function( data ) {
  2.  
  3. $( ".result" ).html( data );
  4.  
  5. });
  6.  

This example fetches the requested HTML snippet and inserts it on the page.

Pages fetched with POST are never cached, so thecache andifModified options in
jQuery.ajaxSetup() have no effect on these requests.

//解释一下:自从jQuery1.5后是用的jqXHR 对象,而曾经的版本号是用的XMLHttpRequest对象。通过post方法获取的数据不会缓存。

The jqXHR Object

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of theXMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by$.get() implements the Promise interface,
giving it all the properties, methods, and behavior of a Promise (seeDeferred object for more information). ThejqXHR.done() (for success),jqXHR.fail()
(for error), andjqXHR.always() (for completion, whether success or error) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see thejqXHR
Object
section of the $.ajax() documentation.

The Promise interface also allows jQuery's Ajax methods, including$.get(), to chain multiple.done(),
.fail(), and.always() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  1. // Assign handlers immediately after making the request,
  2.  
  3. // and remember the jqxhr object for this request
  4.  
  5. var jqxhr = $.post( "example.php", function() {
  6.  
  7. alert( "success" );
  8.  
  9. })
  10.  
  11. .done(function() {
  12.  
  13. alert( "second success" );
  14.  
  15. })
  16.  
  17. .fail(function() {
  18.  
  19. alert( "error" );
  20.  
  21. })
  22.  
  23. .always(function() {
  24.  
  25. alert( "finished" );
  26.  
  27. });
  28.  
  29.  
  30. // Perform other work here ...
  31.  
  32.  
  33. // Set another completion function for the request above
  34.  
  35. jqxhr.always(function() {
  36.  
  37. alert( "second finished" );
  38.  
  39. });
  40.  

//解释一下:向example.php发送请求假设成功就弹出success,假设发送两次都成功了。就弹出second success;假设失败,弹出error。假设完毕,弹出finished等。这里的done就是请求成功后运行的函数。fail就是请求失败后运行的函数。always就是不管请求成功还是失败都要运行的函数。

Deprecation Notice

The jqXHR.success(), jqXHR.error(), andjqXHR.complete() callback methods introduced in jQuery 1.5 aredeprecated as of jQuery 1.8. To prepare your code for their eventual
removal, usejqXHR.done(),jqXHR.fail(), and jqXHR.always() instead.

//解释一下:success、error和complete方法是在jQuery1.5中出现的。如今不推荐使用,推荐用done、fail、always来取代这些函数。

Additional Notes:

  • Due to browser security restrictions, most "Ajax" requests are subject to thesame origin policy;
    the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
  • If a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global.ajaxError()method. Alternatively,
    as of jQuery 1.5, the.error() method of thejqXHR object returned by jQuery.post() is also available for error handling.
  • //解释一下:因为浏览器的安全策略,来自不同的域,子域、port和协议时,获取数据可能不成功。

Examples:

Example: Request the test.php page, but ignore the return results.

1
  1. $.post( "test.php" );
  2.  

Example: Request the test.php page and send some additional data along (while still ignoring the return results).

1
  1. $.post( "test.php", { name: "John", time: "2pm" } );
  2.  

Example: Pass arrays of data to the server (while still ignoring the return results).

1
  1. $.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );
  2.  

Example: Send form data using ajax requests

1
  1. $.post( "test.php", $( "#testform" ).serialize() );
  2.  

Example: Alert the results from requesting test.php (HTML or XML, depending on what was returned).

1
2
3
  1. $.post( "test.php", function( data ) {
  2.  
  3. alert( "Data Loaded: " + data );
  4.  
  5. });
  6.  

Example: Alert the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

1
2
3
4
  1. $.post( "test.php", { name: "John", time: "2pm" })
  2.  
  3. .done(function( data ) {
  4.  
  5. alert( "Data Loaded: " + data );
  6.  
  7. });
  8.  

Example: Post to the test.php page and get content which has been returned in json format (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>).

1
2
3
4
  1. $.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  2.  
  3. console.log( data.name ); // John
  4.  
  5. console.log( data.time ); // 2pm
  6.  
  7. }, "json");
  8.  

//解释一下:上面是post方法的一些简单举例,涉及的东西还是上面讲到的。

Example: Post a form using ajax and put results in a div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7. <meta charset="utf-8">
  8.  
  9. <title>jQuery.post demo</title>
  10.  
  11. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17.  
  18. <form action="/" id="searchForm">
  19.  
  20. <input type="text" name="s" placeholder="Search...">
  21.  
  22. <input type="submit" value="Search">
  23.  
  24. </form>
  25.  
  26. <!-- the result of the search will be rendered inside this div -->
  27.  
  28. <div id="result"></div>
  29.  
  30.  
  31. <script>
  32.  
  33. // Attach a submit handler to the form
  34.  
  35. $( "#searchForm" ).submit(function( event ) {
  36.  
  37.  
  38. // Stop form from submitting normally
  39.  
  40. event.preventDefault();
  41.  
  42.  
  43. // Get some values from elements on the page:
  44.  
  45. var $form = $( this ),
  46.  
  47. term = $form.find( "input[name='s']" ).val(),
  48.  
  49. url = $form.attr( "action" );
  50.  
  51.  
  52. // Send the data using post
  53.  
  54. var posting = $.post( url, { s: term } );
  55.  
  56.  
  57. // Put the results in a div
  58.  
  59. posting.done(function( data ) {
  60.  
  61. var content = $( data ).find( "#content" );
  62.  
  63. $( "#result" ).empty().append( content );
  64.  
  65. });
  66.  
  67. });
  68.  
  69. </script>
  70.  
  71.  
  72. </body>
  73.  
  74. </html>
  75. //解释一下:post的一个实例,这里仅仅给出了前台页面的jQuery实现。

  76. 以下是我写的一个简单的实例(Struts+jQuery实现):

  77. 所需jar包:

  78. web.xml:

  79. <?xml version="1.0" encoding="UTF-8"?
  80. >
  81. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  82.   <display-name>ajax</display-name>
  83.   <welcome-file-list>
  84.     <welcome-file>index.html</welcome-file>
  85.     <welcome-file>index.htm</welcome-file>
  86.     <welcome-file>index.jsp</welcome-file>
  87.     <welcome-file>default.html</welcome-file>
  88.     <welcome-file>default.htm</welcome-file>
  89.     <welcome-file>default.jsp</welcome-file>
  90.   </welcome-file-list>
  91.    <filter>
  92.         <filter-name>struts2</filter-name>
  93.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  94.     </filter>
  95.     <filter-mapping>
  96.         <filter-name>struts2</filter-name>
  97.         <url-pattern>/*</url-pattern>
  98.     </filter-mapping>
  99. </web-app>
  100. struts.xml:

  101. <?xml version="1.0" encoding="UTF-8" ?>
  102. <!DOCTYPE struts PUBLIC
  103.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  104.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  105. <struts>  
  106.     <package name="ajax" extends="json-default" namespace="/">
  107.         <action name="ajaxLogin" class="action.AjaxLoginAction" method="execute">
  108.             <result type="json">
  109.                 <param name="root">result</param>
  110.             </result>
  111.         </action>
  112.     </package>  
  113. </struts>  
  114. 前台页面(index.jsp):

  115. <%@ page language="java" contentType="text/html; charset=UTF-8"
  116.     pageEncoding="UTF-8"%>
  117. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  118. <html>
  119. 	<head>
  120. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  121. 		<title>ajax</title>
  122. 		<script type="text/javascript" src="js/jquery1.11.1.js">
  123. 		</script>
  124. 		<script type="text/javascript">
  125. 			$(document).ready(function(){
  126. 				$("#btn_login").click(function(){
  127. 					$.ajax({
  128. 	                    type:"post",
  129. 	                    url:"ajaxLogin",//须要用来处理ajax请求的action
  130. 	                    dataType:"json",//设置须要返回的数据类型
  131. 	                    data:{
  132. 	                    	loginName:$("#loginName").val(),
  133. 							loginPwd:$("#loginPwd").val()
  134. 	                    },
  135. 	                    success:function(data){
  136. 	                        var d = eval("("+data+")");//将数据转换成json类型,能够把data用alert()输出出来看看究竟是什么样的结构
  137. 	                        //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型,然后取值出来
  138. 	                        $("#result").html("ajax"+d.name+" "+d.pwd);
  139. 	                    },
  140. 	                    error:function(){
  141. 	                        alert("系统异常,请稍后重试!");
  142. 	                        $("#result").html("ajax error");
  143. 	                    }//这里不要加","
  144. 	                });
  145. 	            });
  146. 				$("#btn_post").click(function(){
  147. 					var params = {loginName:$("#loginName").val(),
  148. 							loginPwd:$("#loginPwd").val()};
  149. 					$.post(
  150. 	                    "ajaxLogin",//须要用来处理ajax请求的action
  151. 	                    params,
  152. 	                    function s(data){
  153. 	                        var d = eval("("+data+")");//将数据转换成json类型,能够把data用alert()输出出来看看究竟是什么样的结构
  154. 	                        //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型。然后取值出来
  155. 	                        $("#result").html("ajax"+d.name+" "+d.pwd);
  156. 	                    }
  157. 	                );
  158. 	            });
  159. 			});
  160. 		</script>
  161. 	</head>
  162. 	<body>
  163.       	<span>username:</span>
  164.         <input type="text" id="loginName" name="loginName">
  165.         <br />  
  166.         <span>密码:</span>
  167.         <input type="password" name="loginPwd" id="loginPwd">
  168.         <br />  
  169.         <input type="button" id="btn_login" value="Login" />
  170.         <input type="button" id="btn_post" value="post" />
  171.         <p>
  172.                                     这里显示ajax信息:
  173.             <br />
  174.             <span id="result"></span>
  175.         </p>
  176. </body>
  177. </html>
  178. Action代码:

  179. package action;
  180. import java.util.HashMap;
  181. import java.util.Map;
  182. import net.sf.json.JSONObject;
  183. import com.opensymphony.xwork2.ActionSupport;
  184. public class AjaxLoginAction extends ActionSupport
  185. {
  186. 	private static final long serialVersionUID = 1L;
  187. 	private String result;
  188. 	private String loginName;
  189. 	private String loginPwd;
  190. 	public String getResult()
  191. 	{
  192. 		return result;
  193. 	}
  194. 	public void setResult(String result)
  195. 	{
  196. 		this.result = result;
  197. 	}
  198. 	public String getLoginName()
  199. 	{
  200. 		return loginName;
  201. 	}
  202. 	public void setLoginName(String loginName)
  203. 	{
  204. 		this.loginName = loginName;
  205. 	}
  206. 	public String getLoginPwd()
  207. 	{
  208. 		return loginPwd;
  209. 	}
  210. 	public void setLoginPwd(String loginPwd)
  211. 	{
  212. 		this.loginPwd = loginPwd;
  213. 	}
  214. 	public String execute()
  215. 	{
  216. 		Map<String, String> map = new HashMap<String, String>();
  217. 		map.put("name", this.loginName);
  218. 		map.put("pwd", this.loginPwd);
  219. 		JSONObject jo = JSONObject.fromObject(map);
  220. 		this.result = jo.toString();
  221. 		System.out.println("==============================");
  222. 		System.out.println(result);
  223. 		System.out.println("==============================");
  224. 		return SUCCESS;
  225. 	}
  226. }
  227. //解释一下:这里实现了post和Ajax两种方法的实现。大家能够对照一下。
  228. 如有错误,请指出!
  229. 谢谢!
  230.  

jquery $.post的更多相关文章

  1. 冰冻三尺非一日之寒--jQuery

    第十七章     jQuery          http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...

  2. 进击的Python【第十七章】:jQuery的基本应用

    进击的Python[第十七章]:jQuery的基本应用

  3. 网页设计之jQuery

    1.在html中引入css和jQuery <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  5. vue-cli webpack 引入jquery

    首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...

  6. Python 前端之JQuery

    查找: 选择器 筛选器 操作: CSS 属性 文本 事件: 优化 扩展: Form表单验证 Ajax: 偷偷发请求 www.php100.com/manual/jquery http://blog.j ...

  7. 如何做到尽可能不使用庞大的jQuery

    jQuery 是现在最流行的 JavaScript 工具库. 据统计,目前全世界 57.3% 的网站使用它.也就是说,10 个网站里面,有 6 个使用 jQuery.如果只考察使用工具库的网站,这个比 ...

  8. Web前端新人笔记之了解Jquery

    与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...

  9. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  10. python运维开发(十六)----Dom&&jQuery

    内容目录: Dom 查找 操作 事件 jQuery 查找 筛选 操作 事件 扩展 Dom 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

随机推荐

  1. C++改变编程入口为main函数

    1, 你用vc建了一个控制台程序,它的入口函数应该是main, 而你使用了WinMain. 2.  你用vc打开了一个.c/.cpp 文件,然后直接编译这个文件,这个文件中使用了WinMian而不是m ...

  2. centos下卸载jdk

    链接地址:http://blog.csdn.net/shuixin536/article/details/8954011 http://sunqiusong.email.blog.163.com/bl ...

  3. Nginx 之二: nginx.conf 配置及基本优化

    一:常用功能优化: 1:网络连接的优化: 只能在events模块设置,用于防止在同一一个时刻只有一个请求的情况下,出现多个睡眠进程会被唤醒但只能有一个进程可获得请求的尴尬,如果不优化,在多进程的ngi ...

  4. Appium+Python app自动化测试之脚本启动和停止Appium服务

    研究了一段时间的Appium android app的自动化测试,工作中需要连接多台手机终端同时执行测试用例,我实现的方式是获取用例中需要执行用例的设备id个数以及实际连接到的设备数(通过adb de ...

  5. D1-Linux-CentOS学习打卡

    从一月底开始萌生了想在继续学Python的时候,学一门新的操作系统. 在看很多程序员的JD时,很多都要求熟悉LINUX,并且奔方法里面也提到了在LINUX下的编程. ----------------- ...

  6. jQuery + svg/vml

    流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)   去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结 ...

  7. css中border-width 属性

    border-width属性可能的值 值 描述 thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. inherit 规定 ...

  8. SEOR要懂得如何建立完善的seo运营团队

    网站运营要想能做大做全面,完善的seo运营团队是不可缺少的,跟企业管理一样的道理,seo运营的成功也在于对团队的合理利用,发挥团队中每个成员的优势才能运营好网站.网站的运营CEO要懂得如何建立完善的s ...

  9. 驱动: oops

    linux驱动调试--段错误之oops信息分析 http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=29401328&id= ...

  10. 【QT相关】类头文件解读、QT编辑模式、读取text文本

    Wizard产生的头文件类包含了必须的#include文件.构造函数.析构函数和UI对象: #include <QMainWindow> namespace Ui {class Notep ...