明确jQuery的成功/错误时，Ajax响应是成功

-1

当阿贾克斯成功返回的响应，这是很好的消息跨度类明确jQuery的成功/错误时，Ajax响应是成功

<span class="message success visible"> 
    <div id="portrait"> 
     <img src="/zp/pngFiles/9158976683328087458.png"> 
    </div> 
</span>

，但我遇到的问题是，如果有成功的事件之前发生了先前的错误。

<span class="message success failure visible"> 
    <div id="portrait"> 
     <img src="/zp/pngFiles/2242799749221179588.png"> 
    </div> 
</span>

正如你所看到的跨度类搞砸了，并没有刷新，不知道错误，并从阿贾克斯成功的响应之前，如何重置跨度。

以下是我main.js

if (form.valid()) { 

    var data = 'dmc=' + encodeURIComponent(dmc.value) + '&printerurl=' + encodeURIComponent(printerurl.value); 
    $.ajax({ 
     url: "preview", 
     data: data, 
     type: "POST", 
     beforeSend: function() { 
      $('#preview').attr("disabled", true); // disable button 
     }, 
     success: function(response) { 
      //form.trigger("reset"); DONT WANT TO CLEAR FORM 
      var previewList = "<div id=\"portrait\">"; 
      $.each(response, function(index, value) { 
       previewList += "<img src =\"/zpa/pngFiles/" + value + "\">"; 
      }); 
      $message._show('success', previewList + "<\div>"); 
      $('#preview').attr("disabled", false); // enable button 
      $('#loading').hide(); 
     }, 
     error: function(xhr, status, error, exception, message) { 
      $('#loading').hide(); 
      var errorMessage = "error : " + xhr.responseJSON.error + "<br>" + 
       "status : " + xhr.responseJSON.status + "<br>" + 
       "message : " + xhr.responseJSON.message + "<br>" + 
       "exception : " + xhr.responseJSON.exception; 

      $message._show('failure', errorMessage); 
      $('#preview').attr("disabled", false); // enable button 
     } 
    }); 

}

编辑：

CSS代码：

form .message { 
      text-decoration: none; 
      -moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; 
      -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; 
      -ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; 
      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; 
      -moz-transform: scale(1.05); 
      -webkit-transform: scale(1.05); 
      -ms-transform: scale(1.05); 
      transform: scale(1.05); 
      height: 2.75em; 
      line-height: 2.75em; 
      opacity: 0; 
     } 

      form .message:before { 
       -moz-osx-font-smoothing: grayscale; 
       -webkit-font-smoothing: antialiased; 
       font-family: FontAwesome; 
       font-style: normal; 
       font-weight: normal; 
       text-transform: none !important; 
      } 

      form .message:before { 
       margin-right: 0.5em; 
      } 

      form .message.visible { 
       -moz-transform: scale(1); 
       -webkit-transform: scale(1); 
       -ms-transform: scale(1); 
       transform: scale(1); 
       opacity: 1; 
      } 

      form .message.success { 
       color: #1cb495; 
      } 

       form .message.success:before { 
        content: '\f00c'; 
       } 

      form .message.failure { 
       color: #ff2361; 
      } 

       form .message.failure:before { 
        content: '\f119';

}

来源

2016-03-14 Sasi Kathimanda

选择你的成功和错误处理span元素，并添加/删除类 - 哪来的问题是什么？顺便说一句，你的成功回应并不“很好” - 跨度内的div是无效的HTML。 – CBroe

“，因为你可以看到span类被搞砸了，它不会刷新。我怎么从这里看到它？ – brk

@ user2181397：添加了css代码，我的意思是说失败类与成功属性合并并导致不良行为。 –

之前发送您的Ajax请求重置css类恢复到默认状态。你应该没有问题，然后正确地添加成功和失败类。

HTML：

<div id="feedback" class="message visible"> 
    <div id="portrait"> 
     <img src="/zp/pngFiles/9158976683328087458.png"> 
    <div> 
</div>

脚本：

if (form.valid()) { 
    $('#feedback').attr('class', 'message visible'); 
    var data = 'dmc=' + encodeURIComponent(dmc.value) + '&printerurl=' + encodeURIComponent(printerurl.value); 
    ///... Code ommited for brevity 
}

来源

2016-03-14 11:59:07

明确jQuery的成功/错误时，Ajax响应是成功

回答

相关问题