如何在 javascript 中正确提交后显示成功警报

How do I make a success alert appear after correct submission in javascript

本文关键字：显示 成功 提交 javascript      更新时间：2023-09-26

我想向用户显示一个表单，使用内置警报的引导程序使用 javascript 正确发送警报消息。

当我运行代码时，我得到了值的对象数组（在控制台日志中检查页面）。 我想做的是在发送后显示成功警报（如果成功）。

有test4.sj，它包含JavaScript代码，然后是main.php它是表单的代码。

到目前为止，我拥有的代码在代码片段中。

$('form.ajax').on('submit', function() {
    var that = $(this),
    type = that.attr('action'),
    data = {};
    that.find('[name]').each(function(index, value) {
        //console.log(value);
        var that = $(this),
        name = that.attr('name'),
        value = that.val();
        data[name] = value;
    });
    console.log(data);
    /*  $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){
            console.log(response);
        }
    })*/
    return false;
})
<body>
<form method="post" class="ajax">
    <div>
        <input name="name" type="text" placeholder="Your name" required>
    </div>
    <div>
        <input name="lName" type="text" placeholder="Your Last Name">
    </div>
    <div>
        <textarea name="message" placeholder="Your Message"></textarea>
    </div>
    <input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

只需添加隐藏的警报面板并在 AJAX 成功时显示它。

.HTML：

<form method="post" class="ajax">
  <div class="alert alert-success js-alert hidden" role="alert">
        Form was successfully sent!
  </div>
  ...
  <div>
    <input name="name" type="text" placeholder="Your name">
  </div>
  ...
  <button type="submit" class="btn js-btn">Send</button>
</form>

.JS：

$('form').on('submit', function( event ) {
  var $form = $( this );
  event.preventDefault();
  $('.js-alert').addClass('hidden');
  $('.js-btn').button('loading');
  $.ajax({
    url: '/someurl',
    type: 'POST',
    data: $form.serialize(),
    success: function(response){
        $('.js-alert').removeClass('hidden');
        $('.js-btn').button('reset');
    }
  });
 });

检查小提琴：https://jsfiddle.net/xw63db57/1/

您可以使用

ajax jqXHR status 和 statusCode，并在此基础上编写警报代码

success(data, textStatus, jqXHR){
   var statusCode = jqXHR.status;
   var statusText = jqXHR.statusText;
}
相关文章：