总结一下query中ajax的几种方法

男娘i 2022-07-15 08:27 195阅读 0赞

1.$.ajax()

$.ajax({
    
                type:"POST",  //提交数据的类型 POST GET
    
                url:"testLogin.aspx", //提交的网址
                //提交的数据
                data:{Name:"sanmao",Password:"sanmaoword"},
                //返回数据的格式
                datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
                //在请求之前调用的函数
                beforeSend:function(){ $("#msg").html("logining");},
                //成功返回之后调用的函数 
                success:function(data){ 
                   $("#msg").html(decodeURI(data));            
                }   ,
                //调用执行后调用的函数
                complete: function(XMLHttpRequest, textStatus){ 
                   alert(XMLHttpRequest.responseText);
                   alert(textStatus);
                    //HideLoading();
                },
                //调用出错执行的函数
                error: function(){ 
                    //请求出错处理
                }         
             });
    
     注意：
     1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。
      2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

1.  $.get()通过 HTTP GET请求从服务器上请求数据。

语法：$.get(url, [data], [callback], [type]);
        参数含义：
            1.URL:必须，规定请求的URL。
            2.data:可选，待发送 Key/value 参数。
            3.callback:可选，请求成功后所执行的回调函数。
            4.type:可选，返回内容格式，xml, html, script, json, text, _default。
    
        实例代码：
            $.getJSON("http://www.cupcat.cn/index.jsp", {
       "name":"zhangsan","age",20}, function(result){
        alert("测试");
    }"json");

3..post()通过HTTPPOST请求从服务器上请求数据。语法和用法和.get()方法一样

$.post()和$.get()方法的结构和使用方式相同，不过它们之间仍然有以下区别：

a. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。  
b. GET方式对传输的数据有大小限制(通常不大于2KB)，而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)  
c. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说可以避免这些问题  
d. GET方式和POST方式传递的数据在服务器端的获取也不相同

4.$.getScript()：jQuery提供了此方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

$(function () { 
            $("#send").click(function () { 
                $.getScript("test.js");
            });
    })

使用回调函数：

$.getScript("jquery.color.js", function () {
                $("#go").click(function () {
                   //do something ...
                });

1.  .getJSON()该方法用于加载JSON文件，用法与.getScript()相同

$.getJSON('test.json', function(data) { 
    
                });

使用JSONP形式的回调函数来加载其他网站的JSON数据。例如：

$(function () { 
            $('#send').click(function() { 
                $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                        function(data){ 
                            $.each(data.items, function( i,item ){ 
                                $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
                                if ( i == 3 ) {
                                    return false;
                                }
                            });
                        }
                );
            })
        })
        /** * JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript Callback的形式实现跨域访问 * 上述的url地址并不能请求到数据，仅用作说明。 * */

6.$.load()

语法：load(url,data,function(response,status,xhr))
    url 规定要将请求发送到哪个 URL。
    data    可选。规定连同请求发送到服务器的数据。
    function(response,status,xhr)   
    可选。规定当请求完成时运行的函数。
    额外的参数：
    response - 包含来自请求的结果数据
    status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
    xhr - 包含 XMLHttpRequest 对象
    
    
    
    实例：
      1。加载 feeds.html 文件内容：
          $("#feeds").load("feeds.html");
      2。与上面的实例类似，但是以 POST 形式发送附加参数并在成功时显示信息：
          $("#feeds").load("feeds.php", {limit: 25}, function(){
      alert("The last 25 entries in the feed have been loaded");
    });
    
     3。加载文章侧边栏导航部分至一个无序列表：
    HTML 代码：
    <b>jQuery Links:</b>
    <ul id="links"></ul>
    
    
    $("#links").load("/Main_Page #p-Getting-Started li");