Question

我想使用内置警报的bootstraps向用户显示一个使用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>

Answer 1

只需添加隐藏的警报面板并在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/

Answer 2

你可以使用ajax jqXHR status和statusCode，并根据你可以编写警报代码

success(data, textStatus, jqXHR){
   var statusCode = jqXHR.status;
   var statusText = jqXHR.statusText;
}

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

2 个答案: