Question

由于这个具体问题，我什么也没找到。我试图根据我的ajax请求的响应文本在不同的div中显示一条消息。我创建了两个div #uploadResponsesuccess和#uploadResponseerror。但是由于div是在提交ajax请求之前创建的，因此两个div都会在被ajax函数修改之前显示。

有可能在ajax得到响应并修改它们之前“隐藏”它们吗？否则，它们只会显示而不提交。 Screenshot

$(function() {

    $('form').on('submit', function(e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'http://example/post.php',
            data: $('form').serialize(),
            success: function(response, textStatus, jqXHR) {
                if (response === "success") {
                    $("#uploadResponsesuccess").html(response);

                } else if (response === "error") {
                    $("#uploadResponseerror").html(response);
                }
            }
        });

    });

});

这是我的HTML：

<div class="alert alert-success" id="uploadResponsesuccess"></div>
<div class="alert alert-danger" id="uploadResponseerror"></div>

Answer 1

您可以通过将style="display:none;"添加到div中来隐藏它们，使其免于加载，然后在ajax调用完成后显示相应的一个：

<div class="alert alert-success" id="uploadResponsesuccess" style="display:none;"></div>
<div class="alert alert-danger" id="uploadResponseerror" style="display:none;"></div>

jQuery：

$('form').on('submit', function(e) {

    e.preventDefault();
    // hide any alerts that might already be showing
    $("#uploadResponsesuccess").hide();
    $("#uploadResponseerror").hide();

    $.ajax({
        type: 'post',
        url: 'http://example/post.php',
        data: $('form').serialize(),
        success: function(response, textStatus, jqXHR) {
            if (response === "success") {
                $("#uploadResponsesuccess").html(response).show();

            } else if (response === "error") {
                $("#uploadResponseerror").html(response).show();
            }
        }
    });

});

Ajax成功和错误消息HTML问题

1 个答案: