jquery ajax post 入门及简单实例

简介: 定义和用法 post() 方法通过 HTTP POST 请求从服务器载入数据。 语法 jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) 参数描述url 必需。

定义和用法

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

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

详细说明

该函数是简写的 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"); });

 

以下是遇到的问题实例记录

//2013-1-3 记录

function GetFlightNo() {
        var falg = false;
   var value = $("#No").val();
        $.post(
                $("#getUrl").val(),
      {flight_No:value},
                function (data) {  //回调函数success
                      falg = data; return falg; 
                },
                "json"
         );
    }

function a()
{
  var falg = GetFlightNo();
        if (!falg) {
            alert("不存在!")
            return;
        }
        alert("存在!")
        return;
}                        

问题:

调用a()时,不管GetFlightNo的post传回来的是true或false,在a()总是返回“不存在”,

原因:

a函数执行的时候去调用GetFlightNo函数,但是post的的回调函数success是在请求成功后才执行的,而a()不会等待继续往下执行,导致总是返回false

 

参考:

http://www.w3school.com.cn/jquery/ajax_post.asp

相关文章
|
9月前
|
前端开发 JavaScript
AJax(XHR+Get和Post+AJax的封装)
AJax(XHR+Get和Post+AJax的封装)
267 15
|
11月前
|
XML 前端开发 JavaScript
Ajax与Axios,以及Apifox的入门使用
本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
363 0
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
669 1
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
133 7
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
155 1
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
108 4
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
125 1
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
135 0