javascript - 如何使用ajax提交已经加载ajax的表单，而不重新加载当前页面？

Question

我在这个问题上挣扎了大约一周，我需要做的是，用ajax提交表单，已经加载了ajax，我尝试了很多解决方案，但没有任何效果，所以如果有人知道，正确的方法，我将不胜感激， 并感谢先进。

这是我的代码:

<form class="w3-container" method="POST" action="forms-submitting" id="SignIN">
        <p>
        <label><b> إسم المستخذم </b></label>
        <input class="w3-input w3-border" type="text" name="user_name">
        </p>
        <p>
        <label><b> كلمة المرور <b></label>
        <input class="w3-input w3-border" type="password" name="pass_word">
        </p>
        <p>
            <button type="submit" class="w3-button w3-text-blue"> تسجيل الدخول </button>
        </p>
</form>

这是我的 ajax 代码:

$("#SignIN").submit(function(e) {
  var url = "forms-handle.php";
  $.ajax({
       type: "POST",
       url: url,
       data: $("#SignIN").serialize(),
       success: function(data)
       {
           alert(data); 
       }
  });
  e.preventDefault();
});

Answer 1

由于您没有使用常规提交，因此您可以将按钮更改为 button 类型并将点击事件附加到此按钮，如下所示:

<button type="button" id="login" class="w3-button w3-text-blue"> تسجيل الدخول </button>

$('body').on('click', '#login', function(e) {
  e.preventDefault();

  $.ajax({
       type: "POST",
       url: "forms-handle.php",
       data: $("#SignIN").serialize(),
       success: function(data)
       {
           alert(data); 
       }
  });
});

注意:由于表单是动态加载的，因此您应该使用事件委托(delegate) .on() 。

希望这有帮助。