jQuery的ajax

jQuery封装的ajax

jQuery 采用了三层封装：

最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()
方法。

// 最顶层
// $.getJSON();
// $.getScript();

// 中间层
// $(“div”).load();
// $.get();
// $.post()

// 最底层
// $.ajax();

加载json文件(最顶层)

$.getJSON("./config.json",function(data){
    console.log(data);
})

加载js(最顶层)

$.getScript("./a.js",function(){
    obj.c();
})

通过GET方式请求服务(中间层)

$.get("http://localhost:4006?user=xietian&age=30",function(data){
    console.log(data);
});

$.get("http://localhost:4006","user=xietian&age=30",function(data,success,xhr){
    console.log(data,success,xhr);
    //data:传的数据
    success：传送数据是否发送成功
    xhr：实例化的ajax函数
});

通过POST方式请求服务(中间层)

$.post("http://localhost:4006",{user:"xietian",age:30},function(data){
    console.log(data);
})

通过load方式请求服务(中间层)

.load()方法有三个参数：
url(必须，请求 html 文件的 url 地址，参数类型为 String)、
data(可选，发送的 key/value 数据，参数类型为 Object)、不传递 data，则默认 get 方式
callback(可选，成功或失败的回调函数，参数类型为函数 Function)。

无回调函数参数的

$(“div”).load(“http://localhost:4006”,{user:“xietian”,age:30}); //这种没有写回调函数的，会直接将服务器回传的data写入到document.body页面中。

有回调函数参数的

$(document).load("http://localhost:4006",{user:"xietian",age:30},function(data){
    console.log(data);   
    //有回调函数的不会写在body中，data就为服务器中write返回的内容。
})  

载入html文件内容

如果想让 Ajax 异步载入一段 HTML 内容，我们只需要一个 HTML 请求的 url 即可。
$(“div”).load("./2、jQuery插件.html")

载入一个js/json文件，并执行其中的内容

$(document).load("./a.js",function(data){
    console.log(data);  
    //此时传进来的data就是a.js,而其中是一个对象，但是data的数据类型是一个字符串，所以是无法执行的。所以要再创建一个script，并把data写入到script中，最后把创建的script写入到DOM中才能执行。
    var script=document.createElement("script");
    script.innerHTML=data;
    document.body.appendChild(script);
    obj.c();
})

同样的，传入的json文件也是同理，本来只是个字符串，不过json文件传入的字符串可以直接通过JSON方法转换为一个JSON对象
$(document).load("./config.json",function(data){
    console.log(data,JSON.parse(data));
})

ajax(最底层)

ajax参数

url：发送请求的地址
type：请求方式，POST\GET 默认为GET
timeout：设置请求超时的事件
data：发送到服务器的数据，键值对字符串或对象
dataType：返回的数据类型
success：请求成功后调用的回调函数

ajax默认方式GET

$.ajax({
    url:"http://localhost:4006?user=xietian&age=30",
    success:function(data){
        console.log(data);
    }
})

ajax POST方式

$.ajax({
    url:"http://localhost:4006",
    type:"POST",
    data:{user:"xietian",age:30},
    success:function(data){
        console.log(data);
    }
})

ajax：向百度服务器发送数据，并执行回调函数

$.ajax({
    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=谢天&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",
    type:"GET",
    dataType:"jsonp",
})

function callback(data){
    console.log(data);
}

queryString序列化

<form action="#" method="GET">
    <input type="text" name="user">
    <input type="text" name="age">
    <button type="submit">提交</button>
</form>

$("form").on("submit",function(e){
    e.preventDefault();
    console.log($("[name=user]").val()); //name=user表单的value
    console.log($("[name=age]").val()); //name=age表单的value
    var fd=new FormData($("form")[0]); //获取form的jQuery对象列表中的第一个对象，也就是唯一的那个form，生成他的数据形成的FormData(FormData可以很方便地获取到表单中的所有数据)
    console.log(fd);
    console.log($("form").serialize());//queryString序列化
    //打印出的user=luoluo&age=1
})