zoukankan      html  css  js  c++  java
  • jQuery-ajax

    Ajax:

    1、load()方法:

    //无参数传递,则是get方式:

    $("#resText").load("test.php" , function(){

         

    });

    //有参数传递,则是post方式

    $("#resText").load("test.php" , {name:"rain" , age:"22"},function(){

    });

    Eg:

    $(function(){

          $("#send").click(function(){

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

          });

    });

    当只需要test.html中的某一项的时候,只需要将url改写成load("test.html  .para");

    在load方法中,对于必须在加载完成后才能继续的操作,load提供了回调函数,包含3个参数,分别代表请求返回的内容,请求状态,XMLHttpRequest对象

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

     function(responseText , textStatus ,XMLHttpRequest){

    })

    在load方法中,无论Ajax请求是否成功,只要请求完成后就会触发回调函数

    参数

    类型

    说明

    url

    String

    请求HTML页面的url

    Data(可选)

    Object

    发送至服务器的key/value数据

    Callback(可选)

    Function

    请求完成时的回调函数,无论请求是否成功

    2、$.get()

    参数

    类型

    说明

    url

    String

    请求HTML页面的url

    Data(可选)

    Object

    发送至服务器的key/value数据

    Callback(可选)

    Function

    请求完成时的回调函数,无论请求是否成功

    Type

    String

    服务器返回内容的格式,包括json,xml,html,script,text,_default

    $.get()的回调函数有2个参数

    function(data , textStatus){

          //data:   返回的内容

          //textStatus:   请求状态:success,error,notmodified,timeout

    }

    只有在数据成功返回success后才能被调用回调函数

    3、$.get()的返回数据格式:

    HTML片段:

    function(data , textStatus){

          $("#resText").html(data); //返回的内容添加到页面上

    }

    Xml文档:

    function(data , textStatus){

          var username = $(data).find("comment").attr("username");

          var content = $(data).find("comment content").text();

          var textHtml = "<div class="comment"><h6>"

                         + username + ":</h6><p class="para">"

                         + content + "</p></div>"

          $("#resText").html(data); //返回的内容添加到页面上

    }

    Json:

    function(data , textStatus){

          var username = data.username;

          var content = data.content;

          var textHtml = "<div class="comment"><h6>"

                         + username + ":</h6><p class="para">"

                         + content + "</p></div>"

          $("#resText").html(data); //返回的内容添加到页面上

    }在后面添加第四个参数,"json"

    4、jQuery提供了一个$.getScript()方法直接加载js文件

    $(function(){

          //在加载js文件后直接执行回调函数

          $.getScript('test.html' , function(){

               $("#go").click(function(){

                     $(".block").animate({backgroundColor : 'pink'},1000)

               })

          })  

    })

    5、$.getJSON()方法用来加载JSON文件

    $(function(){

          $('send').click(function(){

               $.getJSON("test.json");

          })

    })

    //单击加载后是在网页上看不到任何效果的,需要一个回调函数,处理返回的数据

    $(function(){

          $('send').click(function(){

               $.getJSON("test.json" , function(data){

                     //data  返回的数据

               });

          })

    })

    6、jQuery提供一个通用的遍历方法:$.each(),用于遍历数组以及对象

    7、$.each()函数不同于jQuery对象的each()方法,它是一个全局变量,不操作jQuery对象,而是以一个数值或者对象i第一个参数,以一个回调函数作为第二个参数,回调函数拥有两个参数,第一个为对象成员或者数组的索引,第二个为对应的变量或者内容

    $.each()函数中,要退出each循环只要false即可

    $(function(){

          $('send').click(function(){

               $.getJSON("test.json" , function(data){

                     $('#resText').empty();

                     var html = " ";

                     $.each(data , function(commentIndex , comment){

                          html += '<div class="comment"><h6>'

                                  + comment['username'] + ':</h6><p class="para">'

                                  + comment['content'] + '</p></div>'

                     });

                     $('#resText').html(html);

               });

          })

    })

    8、$.ajax()方法是jQuery最底层的方法,上述的所有方法都可以使用该方法代替

    代替$.getSON()方法:

    $(function(){

          $('#send').click(function(){

               $.ajax({

                     type : "GET",

                     url : "test.json",

                     dataType : "json",

                     success : function(data){

                          $('#resText').empty();

                     var html = " ";

                     $.each(data , function(commentIndex , comment){

                          html += '<div class="comment"><h6>'

                                  + comment['username'] + ':</h6><p class="para">'

                                  + comment['content'] + '</p></div>'

                     });

                     $('#resText').html(html);

                     }

               })

          })

    })

    9、序列化元素:serialize()方法,作用于一个jQuery对象,将DOM内容序列化为字符串

    <form id="form1" action="#">

    </form>

    //使用$.get()

    $("#send").click(function(){

          $.get("get1.php" , {

               username : $("#username").val(),

               content : $("#content").val()

          } , function(data ,textStatus){

               $("#resText").html(data);

          })

    })

    //序列化

    $("#send").click(function(){

          $.get("get1.php" , $("#form1").serialize() , function(){

               $("#resText").html(data);

          })

    })

    当复选框以及单选框序列化为字符串的时候,只会对选中的值序列化

    10、serializeArray(),不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据,也就是一个对象,可以使用each函数迭代输出

    11、$.param()方法:是serialize()函数的核心,用来对一个数值或者对象按照key/value进行序列化

    Eg:将一个普通的对象序列化

    var obj={a:1,b:2,c:3};

    var k=$.param(obj);

    alert(k);//输出a=1&b=2&c=3

    12、想某个Ajax请求不受全局方法的影响,可以在$.ajax()方法中,将参数global设置为false

    Ajax全局事件:

    方法

    说明

    ajaxStart(callback)

    Ajax请求开始时执行的函数

    ajaxEnd(callback)

    Ajax请求结束时执行的函数

    ajaxComplete(callback)

    Ajax请求完成时执行的函数

    ajaxError(callback)

    Ajax请求发生错误时

    ajaxSend(callback)

    Ajax请求发送时

    ajaxSuccess(callback)

    Ajax请求成功时

  • 相关阅读:
    WebBrowser.ExecWB的完整说明
    jQuery选择器的灵活用法
    Nooice, 首次开通博客园
    【HDU】3663 Power Stations
    【HDU】4069 Squiggly Sudoku
    【FOJ】2076 SUDOKU
    【HDU】3529 Bomberman Just Search!
    【HDU】3909 Sudoku
    【HDU】2780 SuSuSudoku
    【HDU】3111 Sudoku
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5185606.html
Copyright © 2011-2022 走看看