javascript - 在 ajax success() 函数中创建时，Bootstrap 警报刷新并消失

Question

我想在ajax返回时显示Bootstrap的警报。但警报一闪而过，然后很快就消失了。使用 Bootstrap 显示警报的正确方法是什么？谢谢。

$('#btn').click(function () {
    var url = "add";
    var data = $('#add_form').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {});
    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(data),
        dataType: 'json',
        contentType : 'application/json',
        // async: false,
        success: function(data2) {
           if (data2.res == 1) {
                showalert("Error", "alert-danger");
           } else {
                showalert("OK", "alert-success");
           }
        },
        error: function(result)
        {
        },
        timeout: 5000
    });
});
function showalert(message, alerttype) {
    $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + message + '</div>');
    setTimeout(function() {
        $("#alertdiv").remove();
    }, 5000);
 }

<div id = "alert_placeholder"></div>
...
<form id="add_form" method="post">
...
  <div class="form-group row">
      <div class="offset-2 col-10">
      <!-- <button type="submit" id="btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Submit</button> -->
      <button type="submit" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

Answer 1

我会采取不同的做法，您可以直接将警报消息放入 yout HTML 中并使用 show()、hide()、fadeIn() 或 fadeOut():

<div id="alertError" class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
Error
</div>

<div id="alertSuccess" class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
Success
</div>

...
<form id="add_form" method="post">
...
  <div class="form-group row">
      <div class="offset-2 col-10">
      <!-- <button type="submit" id="btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Submit</button> -->
      <button type="submit" id="btn" class="btn btn-primary">Submit</button>
      </div>
  </div>

现在在 javascript 中你不需要这个函数，记住把 $(document).ready:

$(document).ready(function () {
$('#btn').click(function () {
    var url = "add";
    var data = $('#add_form').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {});
    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(data),
        dataType: 'json',
        contentType : 'application/json',
        // async: false,
        success: function(data2) {
           if (data2.res == 1) {
                $(#alertError).show() //or fadeIn
                setTimeout(function() {
                  $("#alertError").hide(); //or fadeOut
                }, 5000);
           } else {
                $(#alertSuccess).show() //or fadeIn
                setTimeout(function() {
                  $("#alertSuccess").hide(); //or fadeOut
                }, 5000);
           }
        },
        error: function(result)
        {
        },
        timeout: 5000
    });
 })
});

记住更改您的 css 文件并不显示任何警报 div:

#alertError,#alertSuccess{
    display:none;
}