现在的网站基本都会用上ajax来和后台交换数据了,这有当然也是有利有弊。今天想说的是当使用ajax的时候该怎么友好的提示。
说到ajax就要说起javascript,这个语言因为是前台用户端执行的,如果用户的网速跟不上,js文件没有下载到本地ajax表现出来就有问题,碰上很需要提示的地方,没有提示或者根本就不执行多么的悲剧。下面举个例子:
我要删除一条记录,点击链接的时候因为js文件没有下载到本地,所以这个操作不会被执行,这就悲剧了。现在问题提出来了,我们来找解决办法。我先把代码贴出来举个简单的例子,可能有些同学一看代码就懂了。
< a hre="/deldata.PHP?id=21">删除< /a>
< 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_935_404@面,但是同样都有提示,提高了用户的体验。
有的朋友就问了,这得多麻烦啊!确实这个做步骤多了一些,但是回头一想这些代码都是可以写成模板的,能重复利用的,做了一次以后后面只需要调用就ok了。而且这个也只是我的一个抛砖引玉的例子,大家可以发散思维,可以用在上传数据上、用在修改数据上、用在查询数据上等等。可以大大的提高用户体验,用户体验就是在细节上下功夫。
原文链接:https://www.f2er.com/ajax/165831.html