zoukankan      html  css  js  c++  java
  • ajax图片加载,complete

    为了给用户更好的体验, 前辈们开发了ajax , 

    那么如何用好这个ajax  给用户最佳的体验呢 ,  

    好吧, 步入正题 , 这节文章就是解决在ajax提交后 如何给用户一个好的反馈,假如用户进行操作 , 等半天一点反应也没有, 其实我们程序已经在执行了  。 那样就会给人不好的一种感觉 , 如果我们给他一点反馈效果就不一样了, 明显要好很多。 如下图 !  

    那么这么一张图 , 在ajax 运行是时候是如果加载进去的呢 ?  当然方法有很多种, 我还是贴上代码吧 。  

    ajaxLoad.textLoad = function(){ // 文本消息
    	$('.waiting').show();  //这里就是我提前准备好的一张gif加载图片,初始化display设为none , 当我ajax一开始运行的时候我就让这张图显示出来, 就有了我们上面的效果图 
    	var id = $('.grouplist li.active').attr('id');
    	var content= $("#content").val();
    	$.ajax({
    		type : 'post',
    		url : 'groups_data.do',
    		dataType : 'JSON',
              timeout : 5000, data : {"type":"sendtext","group_id":id,"content":content}, success : function(data){ $('.waiting').hide(); data = JSON.parse(data['result']['data']); if(data['errcode'] == 45009){ $.Confirm({html:"您本月群发消息已达到上限!",buttons:{ "确定": function(){ return; } }}); }else if(data['errcode'] == 1){ $.Confirm({html:"发达失败!",buttons:{ "确定": function(){ return; } }}); }else if(data['errcode'] == 1){ $.Confirm({html:"发达成功!",buttons:{ "确定": function(){ return; } }}); loadTextMaterialListL(); } }, complete : function(xhr,status){ // 在这里我没有用到error 回调 ,为什么呢 ? 因为我们用到了complete , 请求完成后回调函数 (请求成功或失败之后均调用)。 $('.waiting').hide(); // 当ajax进入到complete回调的时候 , 我们就把刚才加显示的那张加载图片hide就行了 , if(status == 'timeout'){  //如果请求等于我们设置的超时时间, 那么执行下面的代码 ! $.Confirm({html:"请求超时,请稍后重试!" + status ,buttons:{ "确定": function(){ return; } }}); }else if( status == 'error'){ $.Confirm({html:"请求出错!" + status ,buttons:{ "确定": function(){ return; } }}); } } }) };

    嗯 , 其实就是这么简单 。 还等什么,亲自去试试吧。  

  • 相关阅读:
    EonerCMS——做一个仿桌面系统的CMS(五)
    给博客园的忠告——做事态度决定用户忠诚度
    EonerCMS——做一个仿桌面系统的CMS(三)
    EonerCMS——做一个仿桌面系统的CMS(七)
    更改windows服务的配置文件(app.config)必须重启服务才能生效吗?
    jQuery:动态改变html表单的目标页(Target)
    iBatis.Net实现返回DataTable和DataSet对象
    更上层楼:动态安装你的windows服务
    MongoDB简单实践:Only CRUD
    发布一个从webform改进而来的asp.net mvc分页工具类
  • 原文地址:https://www.cnblogs.com/bbyz/p/3988658.html
Copyright © 2011-2022 走看看