jquery$.post【2014-11-10】

作者：四川im__miki | 来源：互联网 | 2014-11-11 10:36

jQuery.post()jQuery.post(url[,data][,success][,dataType])Returns:jqXHRDescription:LoaddatafromtheserverusingaHTTPPOSTrequest.versionadded:

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
  
  Type: PlainObject or String
  
  A plain object or string that is sent to the server with the request.
- //解释一下：data是浏览器通过request请求向服务器发送一些参数，这个参数的类型可以是字符串类型，也可是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 be null 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是从服务器返回的类型，可以是XML、json、script、text、HTML。

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

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

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:

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

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

Pages fetched with POST are never cached, so thecache and ifModified 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.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
});
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});

//解释一下：向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 are deprecated 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 the jqXHR object returned by jQuery.post() is also available for error handling.
//解释一下：由于浏览器的安全策略，来自不同的域，子域、端口和协议时，获取数据可能不成功。

Examples:

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

$.post( "test.php" );

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

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

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

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

Example: Send form data using ajax requests

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

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

$.post( "test.php", function( data ) {
  alert( "Data Loaded: " &＃43; data );
});

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

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " &＃43; data );
  });

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

$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  console.log( data.name ); // John
  console.log( data.time ); // 2pm
}, "json");

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

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


<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demotitle>
  <script src="//code.jquery.com/jquery-1.10.2.js">script>
head>
<body>
 
<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
form>
<div id="result">div>
 
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  // Put the results in a div
  posting.done(function( data ) {
    var cOntent= $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
script>
 
body>
html>
//解释一下：post的一个实例，这里只给出了前台页面的jQuery实现。




下面是我写的一个简单的实例（Struts&＃43;jQuery实现）：
所需jar包：
web.xml：


  ajax
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
     
        struts2  
        org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter  
      
      
        struts2  
        /*  
      

struts.xml：
  
  
  
  
  
      
          
              
                result  
              
          
      
  
  



前台页面（index.jsp）：
<%@ page language="java" cOntentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


	
		
		
		
		
	
	
      	用户名：  
          
        
  
  
        密码：  
          
        
  
  
          
          
          
                                    这里显示ajax信息：  
            
  
              
          

Action代码：
package action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxLoginAction extends ActionSupport
{
	private static final long serialVersiOnUID= 1L;
	
	private String result;
	private String loginName;
	private String loginPwd;
	
	public String getResult()
	{
		return result;
	}
	public void setResult(String result)
	{
		this.result = result;
	}
	public String getLoginName()
	{
		return loginName;
	}
	public void setLoginName(String loginName)
	{
		this.loginName = loginName;
	}
	public String getLoginPwd()
	{
		return loginPwd;
	}
	public void setLoginPwd(String loginPwd)
	{
		this.loginPwd = loginPwd;
	}
	
	public String execute()
	{
		Map map = new HashMap();
		map.put("name", this.loginName);
		map.put("pwd", this.loginPwd);
		JSONObject jo = JSONObject.fromObject(map);
		this.result = jo.toString();
		System.out.println("==============================");
		System.out.println(result);
		System.out.println("==============================");
		
		return SUCCESS;
	}
	
}
//解释一下：这里实现了post和Ajax两种方法的实现，大家可以对比一下。



如有错误，请指出！谢谢！

推荐阅读

ip
Jquery 跨域问题

为什么80%的码农都做不了架构师？JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。当然 ... [详细]

蜡笔小新 2023-12-09 18:24:55
ip
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
ip
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
ip
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
数组
如何提高PHP编程技能及推荐高级教程

本文介绍了如何提高PHP编程技能的方法，推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力，本文提醒读者要有足够的耐心和时间投入。通过实践操作学习，可以更好地理解和掌握PHP语言的特异性，特别是单引号和双引号的用法。同时，本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言，建议读者要从整体来考虑局部，培养大局观。最后，本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]

蜡笔小新 2023-12-11 18:38:37
数组
使用jQuery / AJAX实现两个div的动态更新

本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]

蜡笔小新 2023-12-11 10:07:32
ip
Java后台Jsonp处理方法及其应用场景

本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]

蜡笔小新 2023-12-10 10:55:21
ip
目录浏览漏洞与目录遍历漏洞的危害及修复方法

本文讨论了目录浏览漏洞与目录遍历漏洞的危害，包括网站结构暴露、隐秘文件访问等。同时介绍了检测方法，如使用漏洞扫描器和搜索关键词。最后提供了针对常见中间件的修复方式，包括关闭目录浏览功能。对于保护网站安全具有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-09 23:30:30
ip
DataTables插件介绍及使用方法

本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]

蜡笔小新 2023-12-09 17:40:33
match
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
request
【译】发送表单数据

这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]

蜡笔小新 2023-12-14 16:19:10
ip
AJAX的POST请求及实现数据修改功能的方法

本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细]

蜡笔小新 2023-12-14 16:12:01
ip
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
select
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20
ip
使用cacti监控mssql 2005运行资源情况的操作步骤

本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]

蜡笔小新 2023-12-12 13:57:58