如何使用已经加载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); 
     } 
    }); 
}); 

注意：由于form是动态加载的，您应该使用事件代理.on()。

希望这会有所帮助。