jQuery封装的ajax
jQuery 采用了三层封装:
最底层的封装方法为: . a j a x ( ) , 而 通 过 这 层 封 装 了 第 二 层 有 三 种 方 法 : . l o a d ( ) 、 .ajax(),而通过这 层封装了第二层有三种方法:.load()、 .ajax(),而通过这层封装了第二层有三种方法:.load()、.get()和 . p o s t ( ) , 最 高 层 是 .post(),最高层是 .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
})