明確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響應是成功

回答

相關問題