jQuery Ajax使用，以及常用插件简单介绍

jquery:

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

.load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

回调函数：function(response,status,xhr)

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

response - 包含来自请求的结果数据

status - 包含请求的状态（"success", "notmodified", "error", "timeout"或 "parsererror"）

xhr - 包含 XMLHttpRequest对象

*例 $(function() {

                $("#btn").bind("click", function() {

                    var $this = $(this);

$("ul").load("http:// … .html li",function(){

                        $this.attr("disabled", "true");

                    });

                })

            });

在调用load()方法加载数据时，可以在参数url中，通过空格过滤需要加载的数据，空格右边就是元素过滤选择器。

加载成功后的具体操作可以在callback回调函数中添加。

url路径中不能有空格。

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

*例 $(function () {

                $(“#bt1”).bind("click", function () {

                    $.getJSON("http://www....”,function(ResponseData){

                        $.each(ResponseData, function (index, item) {

                            $("ul").append("<li>" + item[“key...”] + "</li>");

                        });

                    });

                })

            });

在使用getJSON()方法请求服务器中JSON格式文件的数据时，如果请求成功，数据则通过回调函数的参数返回，即ResponseData参数。

getJSON的大小写书写是否一致。

url路径中不能有空格。

使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

*例 $(function () {

                $("#btn").bind("click", function () {

                    var $this = $(this);

                    $.getScript("http://...xx.js",function(){

                        $this.attr("disabled","true");

                    });                    

                });

        });

由于调用getScript()方法加载JavaScript格式文件后，它会自动执行该文件中的代码，因此，可以在文件中编写代码，将获取后的数据显示在页面中。

“getScript”书写是否正确，大小写需要注意。

url路径中不能有空格。

使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[data,][callback(ResponseData,status,xhr){},][dataType])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数,dataType:规定预计的服务器响应的数据类型。

默认地，jQuery 将智能判断,可能的类型:”xml”,"html",”text",”script”,”json”,”jsonp"

*例 $(function() {

$("#btnShow").bind("click", function() {

                  var $this = $(this);

                    $.get("http://… .php”,{ name: "John", time: "2pm" },function(data){

                        $this.attr("disabled", "true");

                      $("ul").append("<li>我的名字叫：" + data.name + "</li>");

                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");

                    },"json");

});

            });

在使用$.get()方法请求服务器数据时，url参数为服务器端的文件路径，callback为回调函数，在该函数中，通过参数传回请求获取的数据。

“$.get”书写是否正确，它们之间通过.点号进行链接。

使用post()方法以POST方式从服务器发送数据

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

$.post(url,[data,][success(data,textStatus, jqXHR),][dataType])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，data可选。映射key-value或字符串值。规定连同请求发送到服务器的数据。

，callback 可选项。为请求成功后执行的回调函数。dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script或 html）。

$.post("test.php", { "data": "reqData" },

   function(resData){

     alert(resData.name); // John

   }, "json");

使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

例如，在表单中添加多个元素，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下所示：

Text1=user&Select1=1&Checkbox1=on

可以看出，当序列化后，调用表单元素本身的serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。

*注意 Text1为name属性的值，user为输入在框的value值，当表单元素没有name时，将不会进行序列化。

使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

具体更多参数参考http://www.w3school.com.cn/jquery/ajax_ajax.asp

*注意 在设置data值时，key为传递数据时的名称，不能加载引号。

data: { num: $("#txtNumber").val() },

使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

也就是说，使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在后面调用ajax请求服务器文件时，只需要设置url地址，请求参数等。

*例 $.ajaxSetup({

                    dataType:"text",

                    type:"post",

                    success:function(data){

                        alert(“ …”);

                    }

                });

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop()方法绑定的函数。

*注 在调用ajaxStart()和ajaxStop()方法之前，首先，需要通过选择器获取绑定方法的元素，然后，再通过元素调用这两个方法。

“ajaxStart”、“ajaxStop”书写是否正确，区分大小写。

表单验证插件-validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

*例 $(function() {

                $("#frmV").validate({

                      //自定义验证规则

                      rules: {

                          email:{

                            required:true,//必须填写

                            email:true   //email邮件格式

                          }

                      },

                      //错误提示位置

                      errorPlacement: function (error, element) {

                          error.appendTo(“div:last”);

                      }

                });  

            });

表单插件-form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

*例 $(function() {

          $("#frmV").ajaxForm({

                    url: "http://www.imooc.com/data/form_f.php", 

                    target: ".tip"   

                });

            });

首先，使用选择器获取表单元素，然后，调用表单插件的ajaxForm()或ajaxSubmit()方法向服务器发送表单数据，并在方法中添加“options”对象。

“ajaxForm”方法名称是否正确，注意区分大小写。

cookie插件-cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

 [option]参数说明：

expires:　　有限日期，可以是一个整数或一个日期(单位：天)。　　这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了

　　　　　 path:　　　 cookie值保存的路径，默认与创建页路径一致。

　　　　   domin:　　  cookie域名属性，默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"

　　　　   secure:　　一个布尔值，表示传输cookie值时，是否需要一个安全协议。

  *例 $(function() {

$("#btnSet").bind("click", function(){

                    if ($("#chksave").is(":checked")) {

                        $.cookie("email",$("#email").val(),{

                            path: "/",

                            expires: 7

                        });

                    }else {

                      $.cookie("email",null,{path: "/"});

                    }

                });

                $("#readCookie").on("click",function(){

                    $("#showContent").append("</br><span>读取cookie的email : "+$.cookie("email")+"</span>");

                });

                 $("#deleteCookie").on("click",function(){

                     $.cookie("email",null,{path:"/"});

                });

            });

如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。

搜索插件-autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(  urlData , [options]  );

*例 $("#autocomplete").autocomplete(emails,{

              minChars: 0,//自动完成激活之前填入的最小字符

              max:5,//列表条目数

              width: 400,//提示的宽度

              scrollHeight: 300,//提示的高度

              matchContains: true,//是否只要包含文本框里的就可以

              autoFill:false,//自动填充

              formatItem: function (data, i, total) {

                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式

              },

              formatMatch: function (data, i, total) {

                       return data[0];

              },

              formatResult: function (data) {

                        return data[0];

              }

        }).result(function(event, data, formatted) {

                    $(".tip").show().html("您的选择是：" +(!data ? "空" : formatted));

            });

urlData : 数组或者url 

minChars : 表示在自动完成激活之前填入的最小字符，这里我们设置为0，在我们双击文本框，不输入字符的时候，就会把数据显示出来

max : 表示列表里的条目数，我们设置了5，所以显示5条

autoFill表示自动填充，就是在文本框中自动填充符合条件的项目，看下图，在我们输入“g”的时候，文本框里填充了“google”

formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

Autocomplete插件里还有两个重要的方法，一个是result( handler)，一个是search( )，比如用户在选定了某个条目时需要触发一些别的方法时，着两个方法就可以起作用了

另补充几个工具函数

检测对象是否为空

$.isEmptyObject(obj);

检测两个节点的包含关系

$.contains (container, contained);

能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：

参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

字符串操作函数

$.trim (str);

调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格

URL操作函数

$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：

$. param (obj);

如果参数obj是一个数组，那么它的每个元素都必须是一个包含name属性和value属性的对象

[

{ name: "name", value:“coco” },

  { name: "age", value: 18 },

  { name: "job", value: "Developer", company: "家里蹲" }

]

.serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求

$.param()序列化对象或者数组,常用于向服务端发送URL请求