Ajax全面基础学习(一)

时间:2021-06-10 12:58:15

快捷方法:

$.get(url,[data],[callback],[type])
get方法的[data]将被链在url后面
[callback]是请求成功后的回调,可以得到响应数据,如果请求失败,看不到callback返回的内容
[type]是头部content-type定义的数据类型,如果返回的数据不能按照type规定的格式进行转换,也不会得到callback回调,因为被视为失败的请求

============================================================

$.post(url,[data],[callback],[type])
与get不同的是,post的[data]被放在requestBody里面,相对来说比较安全

携带数据的ajax请求方式
$.get('/test?x=1');    可以直接将要发送的数据以 ?+data 的形式写在url后面
$.get('/test' , {x:2});    可以添加第二个参数,以json方式发送数据
$.post('/test',{y:2});   post方法不可以使用?+data 的形式

============================================================
load(url,[data],[callback]) 

注意:load方法不同于前面的get()和post(),它是一个局部方法,必须要一个jQuery对象来调用,如$("#container")

$("#container").load('test');    //当没有[data]参数,是get方式请求
后台使用_GET接收:
router.get('/list',function(req,res){
res.send(toHtml(users));
});

$("#container").load('test',{type:1},function(){alert(1)});   //有[data]参数,为post方式请求,所以从request.body 里得到type,而不是url直接取得
后台使用_POST接收:
router.post('/list',{type:1},function(req,res){
var ret = [];
var type = req.body.type; 
for(var i =0;i<users.length;i++){
if(users[i].type == type){
ret.push([users[i]]);
}
}
res.send(toHtml(ret));
});

function toHtml(users){
var ret = [];
for(var i=0 ;i <users.length;i++){
ret.push("<li>" + users[i].name + "</li>");
}
return "<ul>" + ret.join("") + "</ul>" ;
}

==============================================================================

$.getJSON(url,[data],[callback])  多用于跨域请求
当后台返回的数据类型不是json,这里的callback就不会被执行

==============================================================================

$.getScript('/js/a.js',function(){})
用于动态加载script文件,即 在需要的时候才加载相应的script文件,有利于提高页面的加载速度