关于页面AJAX友好性提示
来源:互联网 发布:动态通达网络模型 编辑:程序博客网 时间:2024/05/17 23:35
现在的网站基本都会用上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
- 关于页面AJAX友好性提示
- jsp页面导出功能,ajax异步导出,友好提示
- 页面加载友好提示的问题
- 页面加载无刷新....友好提示
- 友好提示
- ajax提交等待服务器响应友好提示信息的实现
- Tomcat自定义友好错误提示页面无法显示
- 使用Ajax和jQuery实现用户友好的web页面
- AJAX实现异步提交登陆达到页面友好的效果
- 运用ajax制作提示页面
- ajax的页面提示处理
- Flex友好提示、警告
- Ajax等待返回结果时,弹出一个友好的等待提示
- Ajax等待返回结果时,弹出一个友好的等待提示
- spring mvc中 一个完整的 web.xml配置,包括自定义友好提示页面
- jquery重写友好提示对话框
- 简单的友好错误提示
- android报错后,如果友好提示
- 通配符与正则表达式
- 《跟我学C语言》已经出版,欢迎大家多提宝贵意见
- S3C2440之IIS配置
- 两个div的重叠效果,上层透明
- linux make system
- 关于页面AJAX友好性提示
- Scripting.FileSystemObject对象的详细技巧指南
- MCI编程之mciSendCommand
- 关于通过java反射机制,获取类属性的类型修饰符
- hdu A + B Problem II
- C++几个小函数
- Android Texting(2)Testing Fundamentals 测试基础篇
- 如果在框架中,则跳转刷新上级页面
- Python数据结构之二叉树