JQ 的 AJAX 方法

怼烎@ 2022-03-11 06:00 333阅读 0赞

# JQ 的 AJAX 方法 #

JQ是一个强大的JS引用类库，在AJAX方面同样是功能强大，处理了兼容，简化了请求方法，有益于快速开发。

## 一、原生的AJAX ##

var xhr = new XMLHttpRequest();
    var xhr.open("get", url, "true");
    var xhr.send();
    var xhr.onload = function(){ consloe.log(xhr.responseText); }

## 二、JQ的AJAX ##

**方法1**

$.ajax({
               type : "get",              
               url : "test.html",
               async : "true",      // 默认的，可不写
               success : function(data){
                    console.log(typeof data);     // 自动转格式
                    $(".wrap").html(data);
               }
          });

**方法2**

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

`type`: 可选，文件格式

$.get(url, function(data){
         $("body").html(data);
    });

**方法3**

$(parent).load(url [, data] [, callback]);

请求一个`HTML`页面，并替换为`parent`的`innerHTML`  
`data`：可选，发送给服务器的数据  
`callback`：请求完成时的回调，无论成功失败

$("body").load("test.html");

**方法4**

$.getScript(url [, callback]);    $.getJSON(url [, callback]);

加载一段JS并执行

$.getScript("test.js");
    
    
    $.getJSON("test.json", function(data){
         alert(data.name);
    });

**方法5**  
序列化

$("form").serialize();
    
    
            <form action="">
                   <select name="age" id="">
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                   </select>
                   <select name="seat" id="">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                   </select>
                   <input type="button" value="显示" class="btn">
              </form>
              $(".btn").click(function(){
                   alert($("form").serialize());    // 弹窗为：age=11&seat=1
              });