精华内容
下载资源
问答
  • Jquery Ajax

    千次阅读 2016-05-27 17:08:18
    标准Jquery Ajax
    1.基于Jquery的,当然需要引入Jquery库了。Jquery官网地址Jquery官网地址
    2.Jquery Ajax实例
    $.ajax({
         url: url,
         type:"get",
         cache:false,
         data: {
             param:param
         },
         async: true,
         beforeSend:function(){
    
         }
         success:function(data) {
                      
         },
         dataType: type,
         error:function(XMLHttpRequest, textStatus, errorThrown){
      
         }
    });

     
    3.参数注释
    url:请求地址
    type:(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持
    cache:默认true,设置为 false 将不缓存此页面
    data:发送到服务器的数据。将自动转换为请求字符串格式,必须为 Key/Value 格式。
    async:默认true.默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    beforeSend:发送前进行相应业务逻辑处理。
    success:请求成功后的回调函数。data 可能是 xmlDoc, jsonObj, html, text等等。
    dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
    error:(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。
    展开全文
  • jQuery Ajax

    千次阅读 2012-12-26 11:57:52
    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 ....

    1.列表

    jQuery Ajax 操作函数

    jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

    函数 描述
    jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
    .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
    .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
    .ajaxSend() 在 Ajax 请求发送之前显示一条消息。
    jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
    .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
    .ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
    .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
    jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
    jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
    jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
    .load() 从服务器加载数据,然后把返回到 HTML 放入匹配元素。
    jQuery.param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
    jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
    .serialize() 将表单内容序列化为字符串。
    .serializeArray() 序列化表单元素,返回 JSON 数据结构数据。

    2.jQuery ajax - ajax() 方法


    实例

    通过 AJAX 加载一段文本:

    jQuery 代码:

    $(document).ready(function(){
      $("#b01").click(function(){
      htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
      $("#myDiv").html(htmlobj.responseText);
      });
    });
    

    HTML 代码:

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button id="b01" type="button">Change Content</button>
    


    定义和用法

    ajax() 方法通过 HTTP 请求加载远程数据。

    该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

    最简单的情况下,$.ajax() 可以不带任何参数直接使用。

    注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

    语法

    jQuery.ajax([settings])
    参数 描述
    settings

    可选。用于配置 Ajax 请求的键值对集合。

    可以通过 $.ajaxSetup() 设置任何选项的默认值。

    参数

    options

    类型:Object

    可选。AJAX 请求设置。所有选项都是可选的。

    async

    类型:Boolean

    默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

    注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    beforeSend(XHR)

    类型:Function

    发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

    XMLHttpRequest 对象是唯一的参数。

    这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

    cache

    类型:Boolean

    默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

    jQuery 1.2 新功能。

    complete(XHR, TS)

    类型:Function

    请求完成后回调函数 (请求成功或失败之后均调用)。

    参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

    这是一个 Ajax 事件。

    contentType

    类型:String

    默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

    默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

    context

    类型:Object

    这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。

    就像这样:

    $.ajax({ url: "test.html", context: document.body, success: function(){
            $(this).addClass("done");
          }});
    
    data

    类型:String

    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

    dataFilter

    类型:Function

    给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

    dataType

    类型:String

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

    • "xml": 返回 XML 文档,可用 jQuery 处理。
    • "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
    • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
    • "json": 返回 JSON 数据 。
    • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
    • "text": 返回纯文本字符串
    error

    类型:Function

    默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

    有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

    如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

    这是一个 Ajax 事件。

    global

    类型:Boolean

    是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

    ifModified

    类型:Boolean

    仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

    jsonp

    类型:String

    在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

    jsonpCallback

    类型:String

    为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

    password

    类型:String

    用于响应 HTTP 访问认证请求的密码

    processData

    类型:Boolean

    默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

    scriptCharset

    类型:String

    只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

    success

    类型:Function

    请求成功后的回调函数。

    参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

    这是一个 Ajax 事件。

    traditional

    类型:Boolean

    如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

    timeout

    类型:Number

    设置请求超时时间(毫秒)。此设置将覆盖全局设置。

    type

    类型:String

    默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

    url

    类型:String

    默认值: 当前页地址。发送请求的地址。

    username

    类型:String

    用于响应 HTTP 访问认证请求的用户名。

    xhr

    类型:Function

    需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

    回调函数

    如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

    beforeSend

    在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。

    error

    在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)

    dataFilter

    在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

    success

    当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

    complete

    当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

    数据类型

    $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型,比如 HTML,则数据就以文本形式来对待。

    通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML,还可以指定 html、json、jsonp、script 或者 text。

    其中,text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

    注意:我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

    如果指定为 html 类型,任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。

    如果指定为 json 类型,则会把获取到的数据作为一个 JavaScript 对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,它首先尝试使用 JSON.parse()。如果浏览器不支持,则使用一个函数来构建。

    JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。

    注意:JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

    如果指定了 script 或者 jsonp 类型,那么当从服务器接收到数据时,实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下,$.ajax() 不再返回一个 XMLHttpRequest 对象,并且也不会传递事件处理函数,比如 beforeSend。

    发送数据到服务器

    默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

    data 选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。

    高级选项

    global 选项用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。

    如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。

    Ajax 请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。请求超时这个参数通常就保留其默认值,要不就通过 jQuery.ajaxSetup 来全局设定,很少为特定的请求重新设置 timeout 选项。

    默认情况下,请求总会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果,可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置 ifModified 为 true。

    scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集,用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时,这特别好用。

    Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true,这标志着在请求开始后,其他代码依然能够执行。强烈不建议把这个选项设置成 false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死。

    $.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象,但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了,但依然提供一个底层接口来观察和操控请求。比如说,调用对象上的 .abort() 可以在请求完成前挂起请求。

    3.jQuery ajax - ajaxComplete() 方法


    实例

    当 AJAX 请求正在进行时显示“正在加载”的指示:

    $("#txt").ajaxStart(function(){
      $("#wait").css("display","block");
    });
    $("#txt").ajaxComplete(function(){
      $("#wait").css("display","none");
    });
    


    定义和用法

    ajaxComplete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。

    与 ajaxSuccess() 不同,通过 ajaxComplete() 方法规定的函数会在请求完成时运行,即使请求并未成功。

    语法

    .jQueryajaxComplete(function(event,xhr,options))
    参数 描述
    function(event,xhr,options)

    必需。规定当请求完成时运行的函数。

    额外的参数:

    • event - 包含 event 对象
    • xhr - 包含 XMLHttpRequest 对象
    • options - 包含 AJAX 请求中使用的选项

    详细说明

    XMLHttpRequest 对象和设置作为参数传递给回调函数。


    4.jQuery ajax - ajaxError() 方法


    实例

    当 AJAX 请求失败时,触发提示框:

    $("div").ajaxError(function(){
      alert("An error occurred!");
    });
    


    定义和用法

    ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。

    语法

    .ajaxError(function(event,xhr,options,exc))
    参数 描述
    function(event,xhr,options,exc)

    必需。规定当请求失败时运行的函数。

    额外的参数:

    • event - 包含 event 对象
    • xhr - 包含 XMLHttpRequest 对象
    • options - 包含 AJAX 请求中使用的选项
    • exc - 包含 JavaScript exception

    详细说明

    XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递:

    function (event, XMLHttpRequest, ajaxOptions, thrownError) {
     // thrownError 只有当异常发生时才会被传递 this;
     }
    

    5.jQuery ajax - ajaxSend() 方法


    实例

    当 AJAX 请求即将发送时,改变 div 元素的内容:

    $("div").ajaxSend(function(e,xhr,opt){
      $(this).html("Requesting " + opt.url);
    });
    


    定义和用法

    ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。

    语法

    .ajaxSend([function(event,xhr,options)])
    参数 描述
    function(event,xhr,options)

    必需。规定当请求开始时执行函数。

    额外的参数:

    • event - 包含 event 对象
    • xhr - 包含 XMLHttpRequest 对象
    • options - 包含 AJAX 请求中使用的选项

    详细说明

    XMLHttpRequest 对象和设置作为参数传递给回调函数。

    6.jQuery ajax - ajaxSetup() 方法


    实例

    为所有 AJAX 请求设置默认 URL 和 success 函数:

    $("button").click(function(){
      $.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
        $("div").html(result);}});
      $.ajax();
    });
    


    定义和用法

    jQuery.ajaxSetup() 方法设置全局 AJAX 默认选项。

    语法

    jQuery.ajaxSetup(name:value, name:value, ...)

    示例

    设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数:

    $.ajaxSetup({
      url: "/xmlhttp/",
      global: false,
      type: "POST"
    });
    $.ajax({ data: myData });
    
    参数 描述
    name:value 可选。使用名称/值对来规定 AJAX 请求的设置。

    7.jQuery ajax - ajaxStart() 方法


    实例

    当 AJAX 请求开始时,显示“加载中”的指示:

    $("div").ajaxStart(function(){
      $(this).html("<img src='demo_wait.gif' />");
    });
    


    定义和用法

    ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

    详细说明

    无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。

    语法

    .ajaxStart(function())
    参数 描述
    function() 规定当 AJAX 请求开始时运行的函数。

    示例

    AJAX 请求开始时显示信息:

    $("#loading").ajaxStart(function(){
      $(this).show();
    });
    

    8.jQuery ajax - ajaxStop() 方法


    实例

    当所有 AJAX 请求完成时,触发一个提示框:

    $("div").ajaxStop(function(){
      alert("所有 AJAX 请求已完成");
    });
    


    定义和用法

    ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。

    详细说明

    无论 Ajax 请求在何时完成 ,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStop 事件。在此时,由 .ajaxStop() 方法注册的任何函数都会被执行。

    语法

    .ajaxStop(function())
    参数 描述
    function() 规定当 AJAX 请求完成时运行的函数。

    示例

    AJAX 请求结束后隐藏信息:

    $("#loading").ajaxStop(function(){
      $(this).hide();
    });
    

    9.jQuery ajax - ajaxSuccess() 方法


    实例

    当 AJAX 请求成功完成时,触发提示框:

    $("div").ajaxSuccess(function(){
      alert("AJAX 请求已成功完成");
    });
    


    定义和用法

    ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。

    详细说明

    XMLHttpRequest 对象和设置作为参数传递给回调函数。

    无论 Ajax 请求在何时成功完成 ,jQuery 都会触发该 ajaxSuccess 事件。在此时,由 .ajaxSuccess() 方法注册的任何函数都会被执行。

    语法

    .ajaxSuccess(function(event,xhr,options))
    参数 描述
    function(event,xhr,options)

    必需。规定当请求成功时运行的函数。

    额外的参数:

    • event - 包含 event 对象
    • xhr - 包含 XMLHttpRequest 对象
    • options - 包含 AJAX 请求中使用的选项

    示例

    AJAX 请求成功后显示消息:

    $("#msg").ajaxSuccess(function(evt, request, settings){
      $(this).append("<p>请求成功!</p>");
    });
    

    10.jQuery ajax - get() 方法


    实例

    使用 AJAX 的 GET 请求来改变 div 元素的文本:

    $("button").click(function(){
      $.get("demo_ajax_load.txt", function(result){
        $("div").html(result);
      });
    });
    


    定义和用法

    get() 方法通过远程 HTTP GET 请求载入信息。

    这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

    语法

    $(selector).get(url,data,success(response,status,xhr),dataType)
    参数 描述
    url 必需。规定将请求发送的哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    success(response,status,xhr)

    可选。规定当请求成功时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态
    • xhr - 包含 XMLHttpRequest 对象
    dataType

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

    默认地,jQuery 将智能判断。

    可能的类型:

    • "xml"
    • "html"
    • "text"
    • "script"
    • "json"
    • "jsonp"

    详细说明

    该函数是简写的 Ajax 函数,等价于:

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

    根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

    对于 jQuery 1.4,也可以向 success 回调函数传递 XMLHttpRequest 对象。

    示例

    请求 test.php 网页,忽略返回值:

    $.get("test.php");

    更多示例

    例子 1

    请求 test.php 网页,传送2个参数,忽略返回值:

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

    例子 2

    显示 test.php 返回值(HTML 或 XML,取决于返回值):

    $.get("test.php", function(data){
      alert("Data Loaded: " + data);
    });

    例子 3

    显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

    $.get("test.cgi", { name: "John", time: "2pm" },
      function(data){
        alert("Data Loaded: " + data);
      });

    11.jQuery ajax - getJSON() 方法


    实例

    使用 AJAX 请求来获得 JSON 数据,并输出结果:

    $("button").click(function(){
      $.getJSON("demo_ajax_json.js",function(result){
        $.each(result, function(i, field){
          $("div").append(field + " ");
        });
      });
    });
    


    定义和用法

    通过 HTTP GET 请求载入 JSON 数据。

    在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。

    语法

    jQuery.getJSON(url,data,success(data,status,xhr))
    参数 描述
    url 必需。规定将请求发送的哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    success(data,status,xhr)

    可选。规定当请求成功时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态
    • xhr - 包含 XMLHttpRequest 对象

    详细说明

    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      data: data,
      success: callback,
      dataType: json
    });

    发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。

    传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。

    示例

    从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:

    $.getJSON("test.js", function(json){
      alert("JSON Data: " + json.users[3].name);
    });
    

    更多示例

    例子 1

    从 Flickr JSONP API 载入 4 张最新的关于猫的图片:

    HTML 代码:

    <div id="images"></div>

    jQuery 代码:

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
    tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 3 ) return false;
      });
    });
    

    例子 2

    从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据:

    $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
      alert("JSON Data: " + json.users[3].name);
    });
    

    12.jQuery ajax - getScript() 方法


    实例

    通过 AJAX 请求来获得并运行一个 JavaScript 文件:

    $("button").click(function(){
      $.getScript("demo_ajax_script.js");
    });
    


    定义和用法

    getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

    语法

    jQuery.getScript(url,success(response,status))
    参数 描述
    url 将要请求的 URL 字符串。
    success(response,status)

    可选。规定请求成功后执行的回调函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

    详细说明

    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      dataType: "script",
      success: success
    });
    

    这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用,因为那时脚本已经运行了。

    载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。

    比如加载一个 test.js 文件,里边包含下面这段代码:

    $(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

    通过引用该文件名,就可以载入并运行这段脚本:

    $.getScript("ajax/test.js", function() {
      alert("Load was performed.");
    });
    

    注释:jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

    更多实例

    例子 1

    加载并执行 test.js:

    $.getScript("test.js");

    例子 2

    加载并执行 test.js ,成功后显示信息:

    $.getScript("test.js", function(){
      alert("Script loaded and executed.");
    });
    

    例子 3

    载入 jQuery 官方颜色动画插件 成功后绑定颜色变化动画:

    HTML 代码:

    <button id="go">Run</button>
    <div class="block"></div>
    

    jQuery 代码:

    jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
     function(){
      $("#go").click(function(){
        $(".block").animate( { backgroundColor: 'pink' }, 1000)
          .animate( { backgroundColor: 'blue' }, 1000);
      });
    });
    

    13.jQuery ajax - load() 方法


    实例

    使用 AJAX 请求来改变 div 元素的文本:

    $("button").click(function(){
      $("div").load('demo_ajax_load.txt');
    });
    



    定义和用法

    load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

    注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

    语法

    load(url,data,function(response,status,xhr))
    参数 描述
    url 规定要将请求发送到哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    function(response,status,xhr)

    可选。规定当请求完成时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
    • xhr - 包含 XMLHttpRequest 对象

    详细说明

    该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:

    $("#result").load("ajax/test.html");

    如果提供回调函数,则会在执行 post-processing 之后执行该函数:

    $("#result").load("ajax/test.html", function() {
      alert("Load was performed.");
    });
    

    上面的两个例子中,如果当前文档不包含 "result" ID,则不会执行 .load() 方法。

    如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。

    加载页面片段

    .load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

    我们可以修改上面的例子,这样就可以使用所获得文档的某部分:

    $("#result").load("ajax/test.html #container");

    如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

    jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

    注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

    更多实例

    例子 1

    加载 feeds.html 文件内容:

    $("#feeds").load("feeds.html");
    

    例子 2

    与上面的实例类似,但是以 POST 形式发送附加参数并在成功时显示信息:

    $("#feeds").load("feeds.php", {limit: 25}, function(){
      alert("The last 25 entries in the feed have been loaded");
    });
    

    例子 3

    加载文章侧边栏导航部分至一个无序列表:

    HTML 代码:

    <b>jQuery Links:</b>
    <ul id="links"></ul>
    

    jQuery 代码:

    $("#links").load("/Main_Page #p-Getting-Started li");
    

    14.jQuery ajax - param() 方法


    实例

    序列化一个 key/value 对象:

    var params = { width:1900, height:1200 };
    var str = jQuery.param(params);
    $("#results").text(str);
    

    结果:

    width=1680&height=1050

    TIY 实例

    输出序列化对象的结果:

    $("button").click(function(){
      $("div").text($.param(personObj));
    });
    


    定义和用法

    param() 方法创建数组或对象的序列化表示。

    该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。

    语法

    jQuery.param(object,traditional)
    参数 描述
    object 要进行序列化的数组或对象。
    traditional 规定是否使用传统的方式浅层进行序列化(参数序列化)。

    详细说明

    param() 方法用于在内部将元素值转换为序列化的字符串表示。请参阅 .serialize() 了解更多信息。

    对于 jQuery 1.3,如果传递的参数是一个函数,那么用 .param() 会得到这个函数的返回值,而不是把这个函数作为一个字符串来返回。

    对于 jQuery 1.4,.param() 方法将会通过深度递归的方式序列化对象,以便符合现代化脚本语言的需求,比如 PHP、Ruby on Rails 等。你可以通过设置 jQuery.ajaxSettings.traditional = true; 来全局地禁用这个功能。

    如果被传递的对象在数组中,则必须是以 .serializeArray() 的返回值为格式的对象数组:

    [{name:"first",value:"Rick"},
    {name:"last",value:"Astley"},
    {name:"job",value:"Rock Star"}]
    

    注意:因为有些框架在解析序列化数字的时候能力有限,所以当传递一些含有对象或嵌套数组的数组作为参数时,请务必小心!

    在 jQuery 1.4 中,HTML5 的 input 元素也会被序列化。

    更多实例

    我们可以如下显示对象的查询字符串表示以及 URI 编码版本:

    var myObject = {
      a: {
        one: 1, 
        two: 2, 
        three: 3
      }, 
      b: [1,2,3]
    };
    var recursiveEncoded = $.param(myObject);
    var recursiveDecoded = decodeURIComponent($.param(myObject));
    
    alert(recursiveEncoded);
    alert(recursiveDecoded);
    

    recursiveEncoded 和 recursiveDecoded 的值输出如下:

    a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
    a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
    

    可以将 traditional 参数设置为 true,来模拟 jQuery 1.4 之前版本中 $.param() 的行为:

    var myObject = {
      a: {
        one: 1, 
        two: 2, 
        three: 3
      }, 
      b: [1,2,3]
    };
    var shallowEncoded = $.param(myObject, true);
    var shallowDecoded = decodeURIComponent(shallowEncoded);
    
    alert(shallowEncoded);
    alert(shallowDecoded);
    

    recursiveEncoded 和 recursiveDecoded 的值输出如下:

    a=%5Bobject+Object%5D&b=1&b=2&b=3
    a=[object+Object]&b=1&b=2&b=3
    

    15.jQuery ajax - post() 方法

    实例

    请求 test.php 网页,忽略返回值:

    $.post("test.php");

    TIY 实例

    通过 AJAX POST 请求改变 div 元素的文本:

    $("input").keyup(function(){
      txt=$("input").val();
      $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
        $("span").html(result);
      });
    });
    

    亲自试一试

    定义和用法

    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"); });
    

    更多实例

    例子 1

    请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):

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

    例子 2

    向服务器传递数据数组(同时仍然忽略返回值):

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

    例子 3

    使用 ajax 请求发送表单数据:

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

    例子 4

    输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):

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

    例子 5

    向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

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

    例子 6

    获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:

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

    例子 7

    获得 test.php 页面返回的 json 格式的内容:

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


    16.jQuery ajax - serialize() 方法


    实例

    输出序列化表单值的结果:

    $("button").click(function(){
      $("div").text($("form").serialize());
    });
    


    定义和用法

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

    您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

    序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

    语法

    $(selector).serialize()

    详细说明

    .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

    表单元素有几种类型:

    <form>
      <div><input type="text" name="a" value="1" id="a" /></div>
      <div><input type="text" name="b" value="2" id="b" /></div>
      <div><input type="hidden" name="c" value="3" id="c" /></div>
      <div>
        <textarea name="d" rows="8" cols="40">4</textarea>
      </div>
      <div><select name="e">
        <option value="5" selected="selected">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
      </select></div>
      <div>
        <input type="checkbox" name="f" value="8" id="f" />
      </div>
      <div>
        <input type="submit" name="g" value="Submit" id="g" />
      </div>
    </form>
    

    .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

    $('form').submit(function() {
      alert($(this).serialize());
      return false;
    });
    

    输出标准的查询字符串:

    a=1&b=2&c=3&d=4&e=5

    注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

    17.jQuery ajax - serializeArray() 方法


    实例

    输出以数组形式序列化表单值的结果:

    $("button").click(function(){
      x=$("form").serializeArray();
      $.each(x, function(i, field){
        $("#results").append(field.name + ":" + field.value + " ");
      });
    });
    


    定义和用法

    serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

    您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

    语法

    $(selector).serializeArray()

    详细说明

    serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

    注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

    返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

    [ 
      {name: 'firstname', value: 'Hello'}, 
      {name: 'lastname', value: 'World'},
      {name: 'alias'}, // 值为空
    ]
    

    .serializeArray() 方法使用了 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

    该方法可以对已选择单独表单元素的对象进行操作,比如 <input>, <textarea>, 和 <select>。不过,更方便的方法是,直接选择 <form> 标签自身来进行序列化操作。

    $("form").submit(function() {
      console.log($(this).serializeArray());
      return false;
    });
    

    上面的代码产生下面的数据结构(假设浏览器支持 console.log):

    [
      {
        name: a
        value: 1
      },
      {
        name: b
        value: 2
      },
      {
        name: c
        value: 3
      },
      {
        name: d
        value: 4
      },
      {
        name: e
        value: 5
      }
    ]
    

    示例

    取得表单内容并插入到网页中:

    HTML 代码:

    <p id="results"><b>Results:</b> </p>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select><br/>
      <input type="checkbox" name="check" value="check1"/> check1
      <input type="checkbox" name="check" value="check2" checked="checked"/> check2
      <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
      <input type="radio" name="radio" value="radio2"/> radio2
    </form>
    

    jQuery 代码:

    var fields = $("select, :radio").serializeArray();
    jQuery.each( fields, function(i, field){
      $("#results").append(field.value + " ");
    });
    


    展开全文
  • jQuery ajax

    千次阅读 2016-07-17 00:16:53
    该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。最...

    一、ajax() 方法

      ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。最简单的情况下,$.ajax() 可以不带任何参数直接使用。注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

              语法:jQuery.ajax([settings])

       settings 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

      (1)、options:类型:Object可选。AJAX 请求设置。所有选项都是可选的。

      (2)、async:类型:Boolean,默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

      (3)、beforeSend(XHR):类型:Function,发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

      (4)、cache:类型:Boolean,默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。

      (5)、complete(XHR, TS):类型:Function,请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。

      (6)、contentType:类型:String,默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

      (7)、context:类型:Object,这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样:

    $.ajax({ url: "test.html", context: document.body, success: function(){
            $(this).addClass("done");
          }});

      (8)、data:类型:String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

      (9)、dataFilter:类型:Function,给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

      (10)、dataType:类型:String,预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

        "xml": 返回 XML 文档,可用 jQuery 处理。

        "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

        "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

        "json": 返回 JSON 数据 。

        "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

        "text": 返回纯文本字符串

      (11)、error:类型:Function,默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。这是一个 Ajax 事件。

      (12)、global:类型:Boolean,是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

      (13)、ifModified:类型:Boolean,仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

      (14)、jsonp:类型:String,在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

      (15)、jsonpCallback:类型:String,为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

      (16)、password:类型:String,用于响应 HTTP 访问认证请求的密码

      (17)、processData:类型:Boolean,默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

      (18)、scriptCharset:类型:String,只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

      (19)、success:类型:Function,请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。这是一个 Ajax 事件。

      (20)、traditional:类型:Boolean,如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

      (21)、timeout:类型:Number,设置请求超时时间(毫秒)。此设置将覆盖全局设置。

      (22)、type:类型:String,默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

      (23)、url:类型:String,默认值: 当前页地址。发送请求的地址。

      (24)、username:类型:String,用于响应 HTTP 访问认证请求的用户名。

      (25)、xhr:类型:Function,需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

    function ggtznum() {
        $.ajax({
            type: 'post',
            url: getUrl()+'/wq/wq10/wq1003/mobileList.ht',
            cache: false,
            dataType: 'json',
            success: function (data) {
            if($(data).length>0){
               //do something
            },
            error:function(error){
               //error   
            }
        });
    }
    
    

    二、load() 方法

      jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

           语法:$(selector).load(URL,data,callback);

      必需的 URL 参数规定您希望加载的 URL。

      可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

      可选的 callback 参数是 load() 方法完成后所执行的函数名称。

      这是示例文件("demo_test.txt")的内容:

        <h2>jQuery and AJAX is FUN!!!</h2>

        <p id="p1">This is some text in a paragraph.</p>

    下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $('#test').load('/example/jquery/demo_test.txt');
      })
    })
    </script>
    </head>
    <body>
    <h3 id="test">请点击下面的按钮,通过 jQuery AJAX 改变这段文本。</h3>
    <button id="btn1" type="button">获得外部的内容</button>
    </body>
    </html>


    也可以把 jQuery 选择器添加到 URL 参数。

    下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").load("/example/jquery/demo_test.txt #p1");
      });
    });
    </script>
    </head>
    <body>
    <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
    <button>获得外部内容</button>
    </body>
    </html>


    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

        responseTxt - 包含调用成功时的结果内容

        statusTXT - 包含调用的状态

        xhr - 包含 XMLHttpRequest 对象

    下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
          if(statusTxt=="success")
            alert("外部内容加载成功!");
          if(statusTxt=="error")
            alert("Error: "+xhr.status+": "+xhr.statusText);
        });
      });
    });
    </script>
    </head>
    <body>
    <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
    <button>获得外部内容</button>
    </body>
    </html>

    二、AJAX  get()和post() 方法

    1、HTTP 请求:GET vs. POST

      两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

         GET - 从指定的资源请求数据

         POST - 向指定的资源提交要处理的数据

      GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

      POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

     

     

    2、jQuery $.get() 方法

      $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

          语法:$.get(URL,callback);

      必需的 URL 参数规定您希望请求的 URL。

      可选的 callback 参数是请求成功后所执行的函数名。

    下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.get("/example/jquery/demo_test.asp",function(data,status){
          alert("数据:" + data + "\n状态:" + status);
        });
      });
    });
    </script>
    </head>
    <body>
    <button>向页面发送 HTTP GET 请求,然后获得返回的结果</button>
    </body>
    </html>


    3、jQuery $.post() 方法

      $.post() 方法通过 HTTP POST 请求从服务器上请求数据。

          语法:$.post(URL,data,callback);

      必需的 URL 参数规定您希望请求的 URL。

      可选的 data 参数规定连同请求发送的数据。

      可选的 callback 参数是请求成功后所执行的函数名。

    下面的例子使用 $.post() 连同请求一起发送数据:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.post("/example/jquery/demo_test_post.asp",
        {
          name:"Donald Duck",
          city:"Duckburg"
        },
        function(data,status){
          alert("数据:" + data + "\n状态:" + status);
        });
      });
    });
    </script>
    </head>
    <body>
    <button>向页面发送 HTTP POST 请求,并获得返回的结果</button>
    </body>
    </html>


     

    展开全文
  • jquery Ajax提交表单(使用jquery Ajax上传附件)

    万次阅读 多人点赞 2016-04-07 15:05:28
    用过jqueryAjax的人肯定都知道,Ajax的默认编码方式是”application/x-www-form-urlencoded“,此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输...

          用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是”application/x-www-form-urlencoded“,此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石。Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件,用document.getElementById("文件控件的id").value只能拿到文件的name,因此去序列化去编码它也无从谈起(个人观点,有不同意见的欢迎给我留言)。
         众所周知,用form提交表单的时候,有附件的时候,只要设置form的enctype="multipart/form-data",便可以上传附件。于是博主想到,若是能用Ajax提交一个form,那上传附件岂不是变的简单,再也不需要使用类似AjaxFileUpload之类的插件来作上传。html5让这一切便的简单。
         FormData是html5的接口,使用它一行代码便可以拿到整个form表单对象:
         var form = new FormData(document.getElementById("form"));
    然后我们拿着这个form对象,去赋给Ajax的data,并且阻止它将参数转成成String类型的键值对,此举需要设置processData属性为false,此属性默认为true;同时设置Ajax的编码方式为false(contentType: false),在form表单里已经设置了编码方式,Ajax的编码机制已经不需要,这样我们就可以用Ajax去提交一个form对象,从而解决表单有附件的问题。需要注意的是,务必将Ajax的提交方式,设置为post,get请求只能携带几kb的数据。若是不设置processData为false,去提交带附件的form同样是提交不上去的,它的序列化机制是硬伤。所以提交的时候,只能不使用它的序列化机制。
          一言以蔽之:借Ajax的壳,去提交form。
    示例如下:

     <!DOCTYPE html>
    <html>
    <head>
        <script src="js/jquery-1.9.1.min.js"></script>
        <meta charset="utf-8" />
        <title>Ajax提交form</title>
        <script type="text/javascript">
        function test(){
          var form = new FormData(document.getElementById("form"));
          $.ajax({
          url:"接口地址",
          type:"post",
          data:form,
          cache: false,
          processData: false,
          contentType: false,
          success:function(data){
                alert("操作成功!");
          },
          error:function(e){
              alert("网络错误,请重试!!");
           }
          });        
        }
    </script>
    </head>
    <body>
    <form id="form"  enctype="multipart/form-data">
        <input type="text" id="name" name="name" />
        <input type="text" id="phone" name="phone" />
        <input type="text" id="content" name="content" />
        <input type="text" id="price" name="price" />
        <input type="text" id="ifPhone" name="ifPhone" />
        <input type="text" id="ifCerName" name="ifCerName" />
        <input type="text" id="endTime" name="endTime" />
        <input type="text" id="type" name="type" />
    <input type="file" id="fileAttach" name="fileAttach" />
    <input type="button" onclick="test()" value="上传" />
    </form>
    </body>
    </html>


     

    展开全文
  • jQuery Ajax 教程

    千次阅读 2017-07-31 17:01:18
    jQuery Ajax **jQuery 提供多个与 AJAX 有关的方法。 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素...
  • jquery ajax格式

    千次阅读 2020-01-04 18:40:41
    jquery ajax的请求格式$.ajax({ type : 'post',//post或者get url : url, async : false,//是否异步提交 默认为true global : false,//阻止ajax全局属性生效,比如下面的ajaxStart和ajaxStop data : {
  • jQuery Ajax请求基础

    千次阅读 2019-04-11 20:12:44
    jQuery Ajax请求基础 Ajax是前端开发中非常常用的API之一,因此写个文章记录一下如何使用jQuery中的Ajax 请求 1.准备jQuery jQuery下载地址 下载jQuery 前端页面 <!DOCTYPE html> <html> <head> ...
  • jquery ajax get 获取返回值是undefined解决方案 正常情况下,由于jquery的.ajax()、.ajax()、.ajax()、.post()和$.get()方法获取到的数据若想返回给js函数,会发现返回值是undefined,这是由于ajax默认是异步请求...
  • 在Web API中使用jQuery AJAX实现文件上传的例子

    千次下载 热门讨论 2014-09-09 02:21:15
    在Web API中使用jQuery AJAX实现文件上传的例子
  • JQuery ajax操作

    2017-04-29 14:31:30
    JQuery ajax操作    JQuery是什么东西?  是一个JavaScript类库,封装了大量的JavaScript底层代码。  JQueryAjax操作  对JavaScript底层Ajax操作进行了封装,提供了两种方法进行操作  底层的$.ajax()...
  • jQuery Ajax&原生Ajax,XMLHttpRequest

    千次阅读 2017-07-06 22:42:08
    1.Ajax1....2.jQuery Ajax,内部基于’原生Ajax’ 2.伪Ajax,非XMLHttpRequest1.Ajax JQuery Ajax # views.py def index(request): return render(request,'index.html') def add1(request): print(r
  • jQuery Ajax 实例

    千次阅读 2017-07-05 22:54:00
    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:...
  • jQuery学习之jQuery Ajax用法详解

    千次阅读 2015-11-23 17:46:03
    jQuery学习之jQuery Ajax用法详解 [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。我们先从最简单的方法看起...
  • ajax与axios的区别 Jquery ajax与Axios等区别
  • Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
  • <script type="text/javascript" src="js/jquery.min.js"> $(function(){ $(but).click(function(){ $.ajax({ url : "AjaxServlet" , method : "post" , data : { msg : $(msg).val() , info :...
  • jQuery ajax - ajax() 方法

    2015-05-26 19:51:49
     转自:...jQuery ajax - ajax() 方法 jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){
  • jquery ajax监听事件

    千次阅读 2016-03-10 15:32:17
    jquery ajax监听事件
  • jQuery ajax() 方法

    千次阅读 2013-08-04 00:31:13
    jQuery ajax - ajax() 方法jQuery ajax - serialize() 方法
  • jquery ajax POST 例子详解

    万次阅读 2017-05-25 12:43:19
    jquery ajax POST 例子详解
  • jQuery ajax设置全局配置

    千次阅读 2017-07-04 10:24:08
    jQuery ajax设置全局配置
  • jQuery ajax 简单的实例

    万次阅读 多人点赞 2018-10-06 16:18:57
    通过jQuery ajax实现从服务器查询数据,返回给前端并显示到html页面 html文件 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"&gt; &...
  • Jquery Ajax的使用

    千次阅读 2018-04-23 18:37:30
    Ajax概述Ajax就是通过 HTTP 请求加载远程数据。...JQuery Ajax之所以能发送http请求, 是调用了html中的XMLHttpRequest对象(原生ajax)。另外还有一种跨域Ajax。这个会在最后介绍到 。Ajax的一般格式$.ajax({ ...
  • jQuery ajax获取json并解析,获取的json是object对象格式

    万次阅读 多人点赞 2017-07-18 18:13:42
    jquery ajax获取json并解析,获取的json是object对象格式
  • jquery ajax方法使用

    千次阅读 2018-03-26 09:47:19
    jquery ajax方法使用先引入: &lt;script type="text/javascript" src="${ctx}/common/js/jquery.js"&gt;&lt;/script&gt; 再使用ajax方法,具体用法如下: $.ajax({ ...
  • jQuery Ajax异步请求详解

    千次阅读 2019-02-23 15:14:32
    jQueryAjax API是对XMLHttpRequest对象的抽象,解决了浏览器之间的兼容性问题,同时提供了一些方便的方法。这篇博客的撰写参考了jQuery官网,jQuery Ajax API 关于XMLHttpRequest对象请参照我的另一篇博客:...
  • 怎么防止jquery ajax 的重复提交呢怎么防止jquery ajax 的重复提交呢怎么防止jquery ajax 的重复提交呢怎么防止jquery ajax 的重复提交呢怎么防止jquery ajax 的重复提交呢,主要是我这边还要拦截这个ajax请求,配合...
  • Jquery ajax请求返回html数据类型

    千次阅读 2018-11-28 13:18:27
    Jquery ajax请求返回html数据类型Jquery ajax 异步请求返回 htmlftl页面代码java代码返回html页面如下 Jquery ajax 异步请求返回 html 本文简述通过ajax传参请求后台获取html页面并渲染。 ftl页面代码 1.代码如下: ...
  • jquery ajax实例

    万次阅读 2013-12-10 14:49:48
    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,467
精华内容 31,786
关键字:

jqueryajax