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

2017-10-24 18:34:55来源:CSDN作者:usernameysz人点击

分享

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可选。规定预期的服务器响应的数据类型。默认执行智能判断(xmljsonscript 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编码,各元素间通过&号相联。

*注意 Text1name属性的值,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(keyvalue);读取:$.cookie(key),删除:$.cookie(keynull)

其中参数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>读取cookieemail : "+$.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请求


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台