jquery ajax post 入门及简单实例

定义和用法

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

时间: 2024-09-26 03:27:18

jquery ajax post 入门及简单实例的相关文章

Jquery Ajax解析XML数据简单实例

 本篇文章主要是对Jquery Ajax解析XML数据(同步及异步调用)的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: $.ajax({                 async: true, // 默认true(异步请求)                 cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息.                 type: "POST", // 默认:GET 请求方式:[PO

php jquery.ajax无刷新登录简单实例代码

一个很简单的应用实例,就利用了jquery.ajax来实现无刷新登录效果了,方便很简单扼要,实例也只讲了jquery应用这一圬,php教程那款就没讲了,有需要的朋友可以参考一下. <script src="js/jquery-1.4.2.js" type="text/网页特效"></script> <script language="javascript"> function test() { $.ajax({

DOM操作和jQuery实现选项移动操作的简单实例_jquery

DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM选项移动操作</title> <style> select { width: 100px; height: 85px; } div { display: inline-block; width: 50px } </style

jquery.serialize() 函数语法及简单实例_jquery

jQuery - serialize() 方法 W3School给出的定义与用法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语法 $(selector).serialize()详细说明 .serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQuer

jquery 动态增加删除行的简单实例(推荐)_jquery

最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋值 var length = $("#grid tr").length; //获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义 var current = $(obj).parent().parent().parent().prevAll().l

php jquery 多文件上传简单实例

 这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下   代码如下: <div id="mulitplefileuploader">Upload</div>     <div id="status"></div>   <script>     $(document).ready(function()   {     var settings = {       url: &

jquery 图片缩放拖动的简单实例

 本篇文章只要是对jquery 图片缩放拖动的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.不使用jquery,简单的缩放:   代码如下: <HTML>  <HEAD>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <TITLE>onMouseWheel</TITLE>  <SCR

jquery div模态窗口的简单实例_javascript技巧

jquery div模态窗口的简单实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>

jquery树形菜单效果的简单实例_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-