更好的Ajax设计替换div与另一个div

Question

我是Ajax新手。我有一个具有“名称”和一个按钮的模板。当按钮被点击时，名称和按钮将被替换为一些消息。 我的代码完美地工作。 阿贾克斯：

$('#fulfillButton').bind('click',function() { 
     $.ajax({ 
      type : "GET", 
      contentType : "application/json; charset=utf-8", 
      url : "/order/${orderID}", 
      dataType : "json", 
      cache: false, 
      timeout: 12000, 

      success: function (data) { 
        alert("success"); 
      }, 

      error: function (data,textStatus) { 
       if(textStatus == "timeout") 
       { 
        $('#main-panel').replaceWith('<div class="error-message">' + "Timeout, please clcik the button beblow to scan again!" + '</div>'); 
       } 
       else 
       { 
        var responseText = data.responseText; 
        var jsonErrorMessage = JSON.parse(responseText); 
        $('#main-panel').replaceWith('<div class="error-message">' + jsonErrorMessage["body"] + '</div>'); 
       } 
      }, 
     }); 

HTML：

 <div id="main-panel"> 
     <div class="full-name"> 
      ${name} 
     </div> 
     <div id 
     <button id="fulfillButton" type="button" class="action-button shadow animate fulfill-button-color"> 
      FulFill 
     </button> 
    </div> 
    <button id="goBackButton" type="button" class="go-back-button"> 
     Go Back 
    </button> 

但现在我正在寻找一个更好的设计。正如你可以看到

$('#main-panel').replaceWith('<div class="error-message">' + jsonErrorMessage["body"] + '</div>'); 

但我想避免穿插视图元素与逻辑（不放置在这里的div）。我想把DIV放在HTML中，还是可以使用JS中应用的“error_message”风格的现有DIV？如果是这样，我怎么能真正写代码？

Answer 1

你为什么不加在你的HTML错误消息的div（内main-panel，给他们一些IDS，可以说ERROR1，误差2）作为 隐藏<div class="error-message" id="someID' hidden>...</div>，然后当你得到一个错误，而不是replace只需致电

error: function (data,textStatus) { 
    $('#main-panel').find('*').not('.error-message').remove();//Remove everything except from the error-message divs 
    if(textStatus == "timeout") 
    { 
     $('#error1').html('Timeout, please clcik the button beblow to scan again!'); 
     $('#error1').show(); 
    } 
    else 
    { 
     var responseText = data.responseText; 
     var jsonErrorMessage = JSON.parse(responseText); 
     $('#error2').html(jsonErrorMessage["body"]); 
     $('#error2').show(); 
    } 
}, 

Answer 2

您可以有多种解决方案。我给你两个：

第一个解决方案（请参阅javascript）适用于小事情（如错误消息）。

第二个是对滞后的东西很好，比如动态创建表单。这被称为模板。

// Solution 1 
 

 
$('#fulfillButton').bind('click',function() { 
 
    $('#main-panel').replaceWith($('<div />').addClass('error-message').html('Some content here. This is added by dynamically creating the div, adding error message class and adding content'));  
 
}); 
 

 
// Solution 2 
 
$('#fulfillButton2').bind('click',function() { 
 
    $('#main-panel').replaceWith($("#error-message-template").clone().removeClass('hidden').html('Some content here 2. This is added by cloning an existing hidden div, removing the hidden class and replacing the content.'));  
 
});

.error-message{ 
 
    border: 1px solid #f00; 
 
} 
 

 
#main-panel{ 
 
    border: 1px solid #cccccc; 
 
} 
 

 
.hidden 
 
{ 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-panel"> 
 
     <div class="full-name"> 
 
      ${name} 
 
     </div> 
 
     
 
     <button id="fulfillButton" type="button" class="action-button shadow animate fulfill-button-color"> 
 
      
 
      FulFill 
 
     </button> 
 
    <button id="fulfillButton2" type="button" class="action-button shadow animate fulfill-button-color"> 
 
    Fulfill 2 
 
    </button> 
 
    </div> 
 
    <button id="goBackButton" type="button" class="go-back-button"> 
 
     Go Back 
 
    </button> 
 

 
<div id="error-message-template" class="error-message hidden"> 
 
</div>