最近使用到的Ajax总结

1.提交数据

如下是4个不同的图片链接，使用 data-team来区别不同的链接。

<a class="team1" data-team="1" href="javascript:void(0);" onclick="choose(this.dataset)"></a>
<a class="team2" data-team="2" href="javascript:void(0);" onclick="choose(this.dataset)"></a>
<a class="team3" data-team="3" href="javascript:void(0);" onclick="choose(this.dataset)"></a>
<a class="team4" data-team="4" href="javascript:void(0);" onclick="choose(this.dataset)"></a>

点击图片会触发Ajax事件，如下

window.aid = <%=aid%>;
window.openId = "<%=self.getOpenid()%>";
window.nickname = "<%=self.getNickname()%>";
window.head = "<%=self.getHeadimgurl()%>";

function choose(obj){

//淡入蒙版和加载事件
cover.fadeIn();
loading.fadeIn();
$.ajax({
url: '/mobile/game/mooncake',
type: 'post',
data: {
action: 'choose',
aid: window.aid,
team: obj.team,
openid:window.openId,
nickname:window.nickname,
head:window.head
},
complete: function(){

//蒙版和加载事件淡出
loading.fadeOut();
cover.fadeOut();
},
success: function(data){

//根据助力者是否选择相同阵营，成功后跳转到不同的链接
if(window.helperTeam==obj.team){
window.location.href="/mobile/ewj/play.jsp?helperid=<%=helperid%>";
}else{
window.location.href="/mobile/ewj/play.jsp";
}
},
error: function(){
alert('遇到未知错误！');
}
});
}

2.局部更新页面

$('#loadMore').click(function(){
$.ajax({
url: baseUrl,
type: 'get',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: {
action: 'loadmore',
pagenow: start,
aid:window.aid,
campId:window.campId,
limit:limit
},
beforeSend: function(){
loading.fadeIn();
cover.fadeIn();
},
complete: function(){
loading.fadeOut();
cover.fadeOut();
},
success: function(data){
if(data.success) {
if(data.total > 0) {
$('#noMore').hide();
}
if(data.results == null){
return;
}
$.each(data.results, function(i, mb){
var wkshd ='<tr>'+'<td class="rktd1">'+'<img src='+mb.head+'>'+'</td>'+'<td class="rktd2">'+mb.nickname+'</td>'+'<td class="rktd3">'+mb.score+"分"+'</td>'+'<td class="rktd4">'+"队员"+'</td>'+'</tr>';

$('#loadMore').before(wkshd);
});
start ++ ;

if(start>3)
$('#loadMore').hide();
} else {
alert("请求不成功");
}
},
error: function(){
alert('遇到未知错误！');
}
});
});

3.局部更新页面

$("#tab_li3").bind("click",function(){
$.ajax({
url: '/mobile/game/mooncake',
type: 'get',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: {
action: 'camp',
aid:window.aid
},
beforeSend: function(){
loading.fadeIn();
cover.fadeIn();
},
complete: function(){
loading.fadeOut();
cover.fadeOut();
},
success: function(data){
if(data.success) {
if(data.results == null){
return;
}

$(".campMenu tbody tr").remove();

$.each(data.results, function(i, mb){
var j=i+1;
if(mb.campId==window.campId){
var wkshd ='<tr>'+'<td style="width:20%" >'+'<span class="myTeam">'+"我的战队"+'</span>'+'</td>'+'<td style="width:20%">'+j+'</td>'+'<td style="width:30%">'+mb.campName+'</td>'+'<td style="width:30%">'+(mb.playerNumber+350)+'</td>'+'</tr>';
}else{
var wkshd ='<tr>'+'<td style="width:20%" >'+'</td>'+'<td style="width:20%">'+j+'</td>'+'<td style="width:30%">'+mb.campName+'</td>'+'<td style="width:30%">'+(mb.playerNumber+350)+'</td>'+'</tr>';
}
$('#marked').before(wkshd);
});

var start = 0 ;

if(start>3)
$('#loadMore').hide();
} else {
alert("请求不成功");
}
},
error: function(){
alert('遇到未知错误！');
}
});


$("#rankMenu").hide();
$("#campMenu").show();
$(".priceTip1").show();
$(".priceTip").hide();
$("#tab_li2").removeClass("active");
$("#tab_li3").addClass("active");
});