美文网首页我爱编程
jQuery中的ajax应用

jQuery中的ajax应用

作者: whatcanhumando | 来源:发表于2016-10-06 13:25 被阅读163次

    jQuery对ajax进行了3层封装。最底层为$.ajax()方法、第2层为load(),$get(),$post()方法、最高层为$.getScript(),$.getJSON()方法。

    load方法通常用于从web服务器中获取静态的数据文件,主要功能是载入远程HTML代码并插入DOM中,结构为

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

    url为请求HTML页面的URL地址,data为发送给服务器的key/value数据,callbakc为请求完成时的回调函数。

    这个方法可以这么用:

    $("#resText").load("test.html");
    

    调用上面的代码后,test.html页面就会被载入到DOM元素中。

    在实际开发中最常用的是get和post方法,这两个方法是jQuery的全局函数,之前讲的所以方法都是对jQuery对象进行操作。

    $.get()方法使用GET方式进行异步请求,结构为:

    $.get(url [, data] [, callback] [, type]);
    

    url为请求页面的url地址,data为发送至服务器的key/value数据,callback为载入成功时的回调函数,type为服务器端返回内容的格式。

    其它参数都是很简单的,主要是看一下回调函数有哪些参数:

    function(data, textStatus){
      //data : 返回的内容,可以是xml, json, html片段等
      //textStatus : 请求状态: success, error, notmodified, timeout4种
    }
    

    $.get()和$.post()只有等textStatus状态为success时回调函数才会被调用。

    如果返回的是xml文档,那么可以用jquery中的attr,find filter方法进行处理。

    $post()方法实际上跟$get()方法的使用方法差不多,只是背后的原理不同。

    接下来讲一下jQuery提供的最高层方法getScript和getJSON方法。

    有时候,在页面初次加载的时候载入所有的js文件是没有必要的,我们可以动态引入js文件:

    $(document.createElement("script")).attr("src", "test.js").appendTo("head");//方法1
    $("<script type='text/javascript' src='test.js' />").appendTo("head");//方法2
    
    $(function(){
      $("#send").click(function(){
        $.getScript("test.js");
      });
    }).ready();//方法3
    

    $.getScript方法也有回调函数,在js文件成功加载之后调用。方法3加载完JS文件之后,js文件会自动执行。

    $.getJSON方法的使用方式和getScript一样,但是前者的回调函数一般需要写明要如何处理回载的JSON数据。回调函数有一个data的参数,表示JSON对象。

    要遍历JSON对象可以使用jQuery中的$.each方法,这个方法用于遍历对象和数组。

    $.each方法第1个参数为一个数组或一个对象,第2个参数为一个回调函数,回调函数拥有2个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。如果回调函数中返回false那么遍历将结束。

    将下来讲最底层的方法$.ajax方法,jQuery中所有的ajax方法都是通过这个方法实现的,也就是说这个方法可以替换之前讲的所有ajax方法。

    它的结构为:

    $.ajax(option);
    

    这个方法只有一个参数,参数是一个对象,这个对象包含了所需要的请求设置,以及回调函数等信息,参数以key/value的形式存在,所有的参数都是可选的。重要的参数有url,type,complete,success等。

    在使用jQuery之前,网页异步提交表单的时候只能把每个表单元素的值一个一个读出来然后格式化后发送到服务器,现在可以使用jQuery中的serialize方法。

        $("#send").click(function(){
            $.get("get1.php", $("#form1").serialize(), function(data, textStatus){
                $("#resText").html(data);
            });
        });
    

    调用这个方法就相当表将表格里的数据用key/value方法发送给服务器端了。如果修改了表单,增加了表单元素,那么也不用将这段代码进行修改。

    jQuery还为ajax请求设置了全局事件。$.ajaxStart()和$.ajaxStop(),分别在网页发起ajax请求和ajax请求完成时调用,这2个函数的参数为一个回调函数。

    关于jQuery暂时先学习到这里,我认为写这些文章跟写程序一样,从来不会完成,应该要一直更新,目前jQuery学习告一段落,如果以后的项目中还需要学习关于jQuery新的知识,我一定再把学习心得写上来。

    相关文章

      网友评论

        本文标题:jQuery中的ajax应用

        本文链接:https://www.haomeiwen.com/subject/zsceyttx.html