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; } }}); } } }) };

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

  • 相关阅读:
    Binary Tree Maximum Path Sum
    ZigZag Conversion
    Longest Common Prefix
    Reverse Linked List II
    Populating Next Right Pointers in Each Node
    Populating Next Right Pointers in Each Node II
    Rotate List
    Path Sum II
    [Leetcode]-- Gray Code
    Subsets II
  • 原文地址:https://www.cnblogs.com/bbyz/p/3988658.html
Copyright © 2011-2022 走看看