ajax的一些实用技巧

1.尽量优先采用ajax获取html文件，然后再操作dom把数据填充到里面

在实际项目中，如果前端开发人员没有把页面给切分开，那么有如下两种办法可供选择：其一是，在各种点击事件中，用js去拼接并在拼接的时候把数据填充到里面。代码如下：

 

$('#myPublishs').unbind().bind('click',function(){
$.ajax({
url : initPublishUrl,
dataType: "json",
type:'post',
xhrFields: {
withCredentials: true
},
data:JSON.stringify({'page':1,'pageSize':5}),
contentType: 'application/json; charset=utf-8',
success : function(res) {
if(res.code == 200 && res.data){
var htmlStr = "";
var result = res.data.data;
if(result && result.length != 0){
htmlStr = "<ul>" + "<span></span>";
for(var i = 0; i < result.length; i++){
var row = result[i];
var time = row.updateTime;
time = kk_main.subTime(time);
htmlStr += "<li articleid=" + row.id +">" +
"<div>" +
"<span>" + row.updateTime + "</span>" +
"<div class=\"item-border item2 col-sm-12 clearfix\">" ;
if(row.cover){
htmlStr +="<div class=\"col-sm-4 col-md-4 item-img myCollectionPic\">" +
"<img src=\""+row.cover+"\" class=\"img-responsive\" alt=\"\" />" +
"</div>"+
"<div class=\"col-sm-8 col-md-8 item-body\">";
}else{
htmlStr += "<div class=\"col-sm-12 col-md-12 item-body\">" ;
}

htmlStr +='<h3><a href="/v/'+row.id+'">' + row.realTitle + "</a></h3>" +
'<p><a href="/v/'+row.id+'">' + row.summary + "</a></p>" +
"<ul class=\"list-unstyled list-inline inline-black-span\">" ;
if(row.tags){
htmlStr += '<li><span class=\"glyphicon glyphicon-tag\" aria-hidden=\"true\"></span>';
for(var j=0; j< row.tags.length; j++){
if(j < 3){ //最多取3个标签
htmlStr += "<a href=\"/t/"+row.tagIds[j]+"\">" +
"<span class=\"\">"+ row.tags[j]+"</span></a>，" ;
}else{
break;
}
}
htmlStr = htmlStr.substring(0,htmlStr.length-1); //去掉最后一个','
}
htmlStr += "</li><li class=\"blue\"><span class=\"glyphicon glyphicon-eye-open\" aria-hidden=\"true\"></span><span>"+ row.viewCnt + "</span></li>" +
"<li><span class=\"glyphicon glyphicon-comment\" aria-hidden=\"true\" style=\"color:#ddd;\"></span><span>"+ row.commentCnt +"</span></li>" +
"</ul>" +
"</div>" +
"</div>" +
"</div>" +
"</li>";
}

htmlStr += "</ul>" +
"<div class=\"text-center col-sm-12 color-f\">" +
"<div class=\"load-btn\">" +
"<a id=\"morePubs\" href=\"#\" class=\"btn btn-load\">加载更多</a>" +
"</div>" +
"</div>";

}else{
htmlStr = emptyHtml();
}
$('#content').append(htmlStr);
//事件绑定
publicBind();
}else if(res.flag && res.flag == 0){
window.location.href = '/a/Login.html';
}

},
error: function (res) {}
});
});

这种方法优点是，方便将后台获取的数据填充到html字符串中。缺点也很明显，各种字符串拼接和js代码都混合在一起。

其二代码如下：

 

$('#myPublishs').unbind().bind('click',function(){
$.ajax({
url : initPublishUrl,
dataType: "json",
type:'post',
xhrFields: {
withCredentials: true
},
data:JSON.stringify({'page':1,'pageSize':5}),
contentType: 'application/json; charset=utf-8',
success : function(res) {
if(res.code == 200 && res.data){
$('#myPublishs').unbind().bind('click',function(){
$("#content").load("example.html");
//操作dom进行数据填充
});
}
},
error: function (res) {}
});
});
});

该方法的优点是，不需要繁琐的进行html字符串的拼接，主要关注数据的填充就可以。

2.$.ajaxSetup设置全局 AJAX 默认选项。

把共有的ajax设置抽取出来，这样就不用每次写ajax时都要配置共有的选项了

// 设置AJAX请求时某些参数的的默认值
$.ajaxSetup({
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
//设置AJAX请求时，带上cookie
xhrFields : {
withCredentials : true
}
});

很方便有木有…

3.$.ajaxSuccess(callback)请求成功时执行函数。  // 全局定义AJAX完成后需要做的操作，检测是否登录
$("document").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>请求成功!</li>"); });

一般常用在校验用户是否登录，给予相应的提示信息。

巧用ajax事件可以避免在每一个ajax请求中书写同样的代码，降低代码的冗余度。

4.ajax跨域请求

说明：没有进行跨域请求时，在进行请求时，浏览器会默认带上cookie数据，而跨域请求时，浏览器不会带上cookie需要手动加上如下代码

// 设置AJAX请求时某些参数的的默认值
$.ajaxSetup({
//设置AJAX跨域请求时，手动带上cookie
xhrFields : {
withCredentials : true
}
});

posted @