jquery - 如何在Jquery 3.3.1中制作AJAX表单

Question

我将 jQuery 从 1.10.2 更新到 3.3.1，但遇到了一些问题。当我填写输入并按发送按钮时，我的网站将重新加载，并且输入中的信息将添加到我的网站的网址中。它看起来像:

http://egorlero.com/2/?name=Jack&phone=%2B7+453+453-45-34&msg=Hello

并且控制台中没有错误。

这是我的 html 代码:

$(btn).on("click", function() {
  if ($(this).hasClass('disabled')) {
    lightFill(); //show fill inputs
    lightEmpty(); //show empty inputs
    return false;
  } else {
    $(function() {
      var count = 0;
      $('#request_2').on("submit", function(e) {
        if (count == 0) {
          e.preventDefault();
          var data = $('#request_2').serialize();
          $.ajax({
            url: 'mail.php',
            type: 'POST',
            data: data,
          }).done(function(data) {

            //some code going here if success 

          }).fail(function() {

            //some code going here if error

          });
        }
        count++;
        return false;
      });
    });
  }
});

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/scripts_original.js"></script>

<div class="request">
  <form id="request_2">
    <input name="name" type="name" placeholder="Your name:" />
    <input name="phone" type="phone" placeholder="Your phone:" />
    <textarea name="msg" placeholder="Your message:"></textarea>
    <button id="submit" class="send_button disabled">Send</button>
  </form>
</div>

谁能帮我解决这个问题吗？

尽管如此，请免费填写我网站底部的此表格来测试 – http://egorlero.com/index.html#anchor5

Answer 1

几个问题。如果这曾经有效的话那就太棒了。

我相信你想这样做。

1. 使用表单的提交事件
2. 如果已提交，请禁用该按钮
3. 如果出现错误，则启用该按钮，并且可能改为 .done

$("#request_2").on("submit", function(e) {
  e.preventDefault();
  var $theBut = $(this).find(".btn");
  if ($theBut).is('.disabled')) {
    $theBut.removeClass('disabled'); // enable the button?
    lightFill(); //show fill inputs
    lightEmpty(); //show empty inputs
    return false;
  }
  $theBut.addClass('disabled')  
  var data = $(this).serialize();
  $.ajax({
    url: 'mail.php',
    type: 'POST',
    data: data,
  }).done(function(data) {
    //some code going here if success 
  }).fail(function() {
     $theBut.removeClass('disabled')
  });
});