jquery $.post

jquery $.post

大家好,又见面了,我是全栈君。

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
        
        
$.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:

1
2
3
        
        
$.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 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
        
        
// 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 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
        
        
$.post( "test.php" );

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

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

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

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

Example: Send form data using ajax requests

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

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

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

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
        
        
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});

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
        
        
$.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

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
            
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<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>
<!-- the result of the search will be rendered inside this div -->
<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+jQuery实现):

所需jar包:

jquery $.post

web.xml:

<?xml version="1.0" encoding="UTF-8"?

><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"> <display-name>ajax</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

struts.xml:

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE struts PUBLIC  
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "http://struts.apache.org/dtds/struts-2.0.dtd">  
  
<struts>  
  
    <package name="ajax" extends="json-default" namespace="/">  
        <action name="ajaxLogin" class="action.AjaxLoginAction" method="execute">  
            <result type="json">  
                <param name="root">result</param>  
            </result>  
        </action>  
    </package>  
  
</struts>  

前台页面(index.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>ajax</title>
		<script type="text/javascript" src="js/jquery1.11.1.js">
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn_login").click(function(){
					$.ajax({
	                    type:"post",
	                    url:"ajaxLogin",//须要用来处理ajax请求的action
	                    dataType:"json",//设置须要返回的数据类型
	                    data:{
	                    	loginName:$("#loginName").val(),
							loginPwd:$("#loginPwd").val()
	                    },
	                    success:function(data){
	                        var d = eval("("+data+")");//将数据转换成json类型,能够把data用alert()输出出来看看究竟是什么样的结构
	                        //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型,然后取值出来
	                         
	                        $("#result").html("ajax"+d.name+" "+d.pwd);
	                         
	                    },
	                    error:function(){
	                        alert("系统异常,请稍后重试!");
	                        $("#result").html("ajax error");
	                    }//这里不要加","
	                });
	            });
				$("#btn_post").click(function(){
					var params = {loginName:$("#loginName").val(),
							loginPwd:$("#loginPwd").val()};
					$.post(
	                    "ajaxLogin",//须要用来处理ajax请求的action
	                    params,
	                    function s(data){
	                        var d = eval("("+data+")");//将数据转换成json类型,能够把data用alert()输出出来看看究竟是什么样的结构
	                        //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型。然后取值出来
	                         
	                        $("#result").html("ajax"+d.name+" "+d.pwd);
	                    }
	                );
	            });
			});
		</script>
	</head>
	<body>
      	<span>username:</span>  
        <input type="text" id="loginName" name="loginName">  
        <br />  
  
        <span>密码:</span>  
        <input type="password" name="loginPwd" id="loginPwd">  
        <br />  
  
        <input type="button" id="btn_login" value="Login" />  
        <input type="button" id="btn_post" value="post" />  
        <p>  
                                    这里显示ajax信息:  
            <br />  
            <span id="result"></span>  
        </p>  
</body>
</html>

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<String, String> map = new HashMap<String, String>();
		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两种方法的实现。大家能够对照一下。 如有错误,请指出!

谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/116164.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • KAZE论文研读「建议收藏」

    KAZE论文研读「建议收藏」KAZE是发表在ECCV2012的一种特征点检测算法,相比于SIFT和SURF,KAZE建立的高斯金字塔是非线性的尺度空间,采用加性算子分裂算法(AdditiveOperatorSplitting,AOS)来进行非线性扩散滤波。一个很显著的特点是在模糊图像的同时还能保留边缘细节。邹宇华在CSDN中有一系列文章进行了讲解。AKAZE是加速版KAZE特征,即AcceleratedKAZE…

    2022年6月24日
    26
  • JAVA中ResourceBundle使用详解

    JAVA中ResourceBundle使用详解JAVA中ResourceBundle使用详解这个类主要用来解决国际化和本地化问题。国际化和本地化可不是两个概念,两者都是一起出现的。可以说,国际化的目的就是为了实现本地化。比如对于“取消”,中文中

    2022年7月4日
    32
  • Android studio 无线adb连接设备

    Android studio 无线adb连接设备1 设备跟电脑需要在同一网段中 2 通过 USB 将设备与电脑连接 3 在 Androidstudi 的 Terminal 控制台中 进入 androidstudi 配置的 SDK 中的 platform tools 目录下 4 输入 adbdevices 查看当前是否有设备连接过 5 输入 adbtcpip 端口 初始化端口号 多设备下指定某一个设备需要在 adb 后加 s 设备 id 如 adbtcpip8888 输入 adbconnect 设备

    2025年10月7日
    4
  • python+opencv的图像学基础以及简单的人脸识别

    python+opencv的图像学基础以及简单的人脸识别

    2021年10月6日
    44
  • 什么是带通滤波器,其有什么作用?_带阻滤波器的作用是什么

    什么是带通滤波器,其有什么作用?_带阻滤波器的作用是什么带通滤波器作用带通滤波器是一个允许特定频段的波通过同时屏蔽其他频段的设备。比如RLC振荡回路就是一个模拟带通滤波器。带通滤波器是指能通过某一频率范围内的频率分量、但将其他范围的频率分量衰减到极低水平的滤波器,与带阻滤波器的概念相对。一个模拟带通滤波器的例子是电阻-电感-电容电路(RLC)。这些滤波器也可以用低通滤波器同高通滤波器组合来产生。顾名思义,带通滤波器可以理解成为一个电子接口单元,这个单元…

    2025年9月22日
    4
  • bat批量删除文件后缀_怎么批量删除文件名中的数字

    bat批量删除文件后缀_怎么批量删除文件名中的数字起因一个字,懒!但是机器做简单重复的事,都不会这么觉得~反而可能乐在其中哈!具体操作用bat命令批量操作,新建一个.bat文件(就是.txt文件改一下后缀),然后用文本格式打开,键入:@echooffSetlocalEnabledelayedexpansionset”str=想要去掉的字符串”for/f”delims=”%%iin(‘dir/b*.*…

    2022年9月24日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号