Ajax全面基础学习

Posted 2020-07-03 大 宝 章

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax全面基础学习相关的知识，希望对你有一定的参考价值。

快捷方法：

 

$.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文件，有利于提高页面的加载速度