关于页面AJAX友好性提示

前端之家收集整理的这篇文章主要介绍了关于页面AJAX友好性提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

现在的网站基本都会用上ajax来和后台交换数据了,这有当然也是有利有弊。今天想说的是当使用ajax的时候该怎么友好的提示

说到ajax就要说起javascript,这个语言因为是前台用户端执行的,如果用户的网速跟不上,js文件没有下载到本地ajax表现出来就有问题,碰上很需要提示的地方,没有提示或者根本就不执行多么的悲剧。下面举个例子:

我要删除一条记录,点击链接的时候因为js文件没有下载到本地,所以这个操作不会被执行,这就悲剧了。现在问题提出来了,我们来找解决办法。我先把代码贴出来举个简单的例子,可能有些同学一看代码就懂了。

html页面中的删除链接

< a hre="/deldata.PHP?id=21">删除< /a>

js文件代码(我用jquery)

< script language="javascript" type="text/javascript">
$(document).ready(function(e){
$('#del').click(function(){
$.ajax({
url:$(this).prop('href'),
type:'get',
dataType:'html',
timeout:10000,//超时时间 10秒
data:'',
success: function(mydata) {
alert(mydata);
},
error: function() {
alert('网络传输错误,请稍后再试!');
}
});
return false;
})
});
< /script>

deldata.PHP 代码 (我用的是thinkPHP框架)

<?PHP
$data = $_GET;
$check = false;
if($_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest"){ //判断是否为ajax提交过来的数据
$check = true;
}
$list = M('comments')->where('id="'.$data['id'].'"')->delete();
if($list){ //删除成功
if($check){
echo 'ajax删除成功';
} else{
echo '删除成功!';
}
}else{ //删除失败
if($check){
echo 'ajax删除失败';
} else{
echo '删除失败!';
}
}
?>

我说下原理,当点击删除链接时正常情况下会跳转到deldata.PHP这个页面执行删除操作,输出删除成功”或者“删除失败”。但是这个链接用jquery绑定了一个click事件,亮点就在这里了。点击链接的时候jquery会用ajax方法传输这些值到后台后台进行删除操作返回“ajax删除成功”或者“ajax删除失败”,弹出对话框来提示。还没完,这个时候jquery的ajax执行完了这个链接还是会跳转到deldata.PHP这个页面,所以我们需要我们在最后用return false让这个链接失效不跳转

然后deldata.PHP这里也要说一下,if($_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest") 这个判断是为了判断是否ajax传输过来的数据,如果是就把$check这个变量之前设置的值false改变成true。后面的代码就是根据这个$check来做相对应的输出提示

这样我们就相当于有两套提示模式,如果js在客户端由于各种原因没有被执行,那么就会走传统路线@R_278_404@面,但是同样都有提示,提高了用户的体验。

有的朋友就问了,这得多麻烦啊!确实这个做步骤多了一些,但是回头一想这些代码都是可以写成模板的,能重复利用的,做了一次以后后面只需要调用就ok了。而且这个也只是我的一个抛砖引玉的例子,大家可以发散思维,可以用在上传数据上、用在修改数据上、用在查询数据上等等。可以大大的提高用户体验,用户体验就是在细节上下功夫。

转载于随彩吧 http://suicai8.com/detail/index/id/18

猜你在找的Ajax相关文章