关于页面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在客户端由于各种原因没有被执行，那么就会走传统路线跳转页面，但是同样都有提示，提高了用户的体验。

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

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