JQ 的 AJAX 方法

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
          });