Question

我是Ajax的新手。我有一个名为＆＃34; name＆＃34;和一个按钮。单击按钮时，名称和按钮将替换为某些消息。我的代码完美无缺。 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>');

但我想避免在逻辑中散布视图元素（不要在这里放置divage）。我想把DIV放在HTML中，或者我可以将现有的DIV用于＆＃34; error_message＆＃34;样式应用于JS？如果是这样，我怎么能真正编写代码？

Answer 1

为什么不在你的html中添加错误消息div（在main-panel内，给他们一些id，让我们说 error1 ， error2 ）as 隐藏<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）适用于小事（例如您的错误消息）。

第二种方法适用于滞后物，例如动态创建表单。这称为模板。

＆＃13;

// 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.'));       
});

＆＃13;

.error-message{
  border: 1px solid #f00;
}

#main-panel{
  border: 1px solid #cccccc;
}

.hidden
{
  display: none
}

＆＃13;

<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>

＆＃13;

更好的Ajax设计用另一个div代替div

2 个答案: