jQuery中的Ajax

jQuery中的Ajax
----------------
**ajax()方法**

 1. ajax()方法是功能最强大最齐全的请求服务器数据的方法
 2. ajax()能够获取服务器返回的数据
 3. ajax()能够向服务器发送并传递数值
调用的格式：` jQuery.ajax([settings]) `或` $.ajax([settings]) `
参数[settings]为发送ajax()请求时的各项参数的配置信息，键值对的形式写入
以下是settings的所有可选属性

``` async ```
 布尔值，表示请求是否异步处理。默认是 true。

``` beforeSend(xhr) ```
发送请求前运行的函数。

``` cache ```
 布尔值，表示浏览器是否缓存被请求页面。默认是 true。

``` complete(xhr,status) ```
请求完成时运行的函数（在请求成功或失败之后均调用，即在success 和 error 函数之后）。
``` contentType ```
发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
``` context ```     
为所有 AJAX 相关的回调函数规定 "this" 值。
``` data ```     
规定要发送到服务器的数据。
```** dataFilter(data,type) **```     
用于处理 XMLHttpRequest 原始响应数据的函数。
``` dataType ```     
预期的服务器响应的数据类型。
``` error(xhr,status,error) ```     
如果请求失败要运行的函数。
``` global ```     
布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
``` ifModified ```     
布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
``` jsonp ```     
在一个 jsonp 中重写回调函数的字符串。
``` jsonpCallback ```     
在一个 jsonp 中规定回调函数的名称。
``` password ```     
规定在 HTTP 访问认证请求中使用的密码。
``` processData ```     
布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
``` scriptCharset ```     
规定请求的字符集。
``` success(result,status,xhr) ```
当请求成功时运行的函数。
``` timeout ```
设置本地的请求超时时间（以毫秒计）
``` traditional ```    
布尔值，规定是否使用参数序列化的传统样式。
``` type ```    
规定请求的类型（GET 或 POST）。
``` url ```    
规定发送请求的 URL。默认是当前页面。
``` username ```
规定在 HTTP 访问认证请求中使用的用户名。
``` xhr ```
用于创建 XMLHttpRequest 对象的函数。
使用实例
 参数属性太多不便于在ajax()方法中更改设定，可以用ajaxSetup()方法先行设置。（后面做介绍）

 $.ajax({
  url:"http://www.xxx.com/data/check.php",
              //要发送到的服务器URL
  data: { num: $("#txtNumber").val()} ,
               //将输入的数字发送给服务器进行判别奇偶
  success: function (data) {
                            $("ul").append("
你输入的  "
                            + $("#txtNumber").val() + " 是 "
                            + data + " 
");
                     //然后取回判断结果
                        }
                    }

 

----------
                         

jquery中异步提交数据的其他方法
------------------

**load()方法**
     load()方法是通过Ajax请求加载服务器中的数据，并把返回值数据放置到指定的元素中，该方法的调用格式为： ` load（url,data,[callback]） `
其中参数

 - url为加载服务器的地址
 - data（可选），为请求时发送的数据
 - callback为请求成功后执行的回调函数
示例：

$(#button).load("data/fruit.html",function(){
      $this.attr("disabled","true");
});

 

此处第二个参数data缺省，实现点击button摁钮，向该地址发送数据，成功时把摁钮变为不可用


**getJSON()方法**
使用getJSON方法能够通过Ajax异步请求的方式，获取服务器中的数据，并对数据进行解析，显示在页面中
getJSON()的使用格式为：` $.getJSON(url,data,[callback]) `或者` jQuery.getJSON(url,[data],[callback]) `
 - url为加载服务器的地址
 - data（可选），为请求时发送的数据
 - callback为请求成功后执行的回调函数
------------------------例子-------------------------------------

$(function(){
    $("#btnShow").bind("click",function(){
        var $this=$(this);
         $getJSON("Data/sport.json",function(data){
                  $this.attr("disabled","true") ;
                  $.each(data,function(index,sport){
                        $("ul").append("
"+sport["name"]+"
");
                   });
           })
     })
});

实现点击页面中的“#btnShow”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并用each()遍历数据，将指定的字段名内容显示在ul标签中

**getScript()方法**
调用getScript()加载并执行服务器中JavaScript格式的文件

``` $.getScript(url,[callback]) ```

**get()方法**
采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据

``` $.get(url,[callback]) ```

**post()方法**
post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
``` $.post(url,[data],[callback]) ```
**serialize()方法**
该方法可以讲表单元素的填写内容进行序列化，生成标准的URL编码文本字符串，该字符串即可用于直接进行ajax请求
``` $(表单元素).serialize() ```
![图片描述][1]
**ajaxSetup()方法**
方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值
调用格式：``` $.ajaxSetup([options]) ```
使用列子
 

//先进行ajaxSetup()设置
             $.ajaxSetup(
                {
                 data:{ num:$("#txtNumber").val()},
                 success:function(data){
                        $("ul").append("
你输入的  "
                            + $("#txtNumber").val() + " 是 "
                            + data + " 
");
                    }
                });
//然后分别进行两次ajax()请求
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.xxx.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.xxx.com/data/check_f.php"
                    });
                })

 

**ajaxStart()方法**   与     **ajaxStop()方法**
` ajaxStart(function()) `是方法在ajax请求触发（启动）后，但在请求发送前执行指定的函数
` ajaxStop(function()) `是在ajax请求成功后，执行的指定函数

$("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                    alert("注意文字内容的变化哦");
                });
 $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
$("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                        $("ul").append("
请求成功
");
                        }
                    });
                })
              

 

本文由本人总结自慕课网@WayneJ的ajax全接触课程链接描述，代码与截图非原创，仅供学习，如有侵权请私信告知。

转载于:https://www.cnblogs.com/HXW-from-DJTU/p/5581722.html