javascript - AJAX 提交表单，但它不会停止，但它会将数据插入数据库

Question

我正在开发一个留言板，如果禁用了 javascript，则必须验证输入表单。如果启用了 javascript，它必须有 AJAX 来停止刷新和提交表单。

我有一个由 php 验证的 html 表单。现在我正在尝试添加 jquery 和 ajax 来停止页面刷新。 我在提交按钮上添加了加载 gif 和非事件输入字段。但是当我添加 $.ajax gif 不会停止旋转并且字段不会变为事件状态。刷新页面后，我可以看到输入数据已添加到数据库中。

我在使用 ajax 方面还很陌生，也许您可​​以帮助我找到解决问题的方法。

这是我的代码:

$(document).ready(function(){
  $("#submit").click(function(e){
    e.preventDefault();

    // getting input values by id
    var fullname = $("#fullname").val();
    var message = $("#message").val();

    // array for input values
    var data = { fullname : fullname,
      message : message };

      //disabled all the text fields
      $('.text').attr('disabled','true'); 
      //show the loading sign
      $('.loading').show();

      // AJAX Code To Submit Form.
      $.ajax({
        type: "POST",
        url: "validation.php",
        //dataType : 'json',
        data: data,
        cache: false,
        success: function(data){
          alert('success');
        }
      }).done(function(result) {
        if (result == "")
        form.submit();
        else
        alert(result);
      }).fail(function() {
        alert('ERROR');
      });
    });
  });

我得到成功和输入值警报，当我使用 dataType : 'json', 我得到错误警报。

如有任何帮助，我将不胜感激。

Answer 1

也许一旦你显示 .gif 图像，你就不会再次隐藏相同的 .gif 图像，尽管你的 ajax 完成或停止或失败(在任何情况下)。

So, on success of ajax add below two lines to hide .gif and enable text fields.

//enabled all the text fields
$('.text').prop("disabled", false);

//hide the loading sign
$('.loading').hide();

整个代码看起来是这样的，

// AJAX Code To Submit Form.
$.ajax({
   type: "POST",
   url: "validation.php",
   data: data,
   cache: false,
   success: function(data){
      //enabled all the text fields
     $('.text').prop("disabled", false);
     //hidethe loading sign
     $('.loading').hide();
     alert('success');
  }
  });