Question

页面上有很多表格。我想提交每个表单而无需重新加载页面。我尝试了很多方法，但是做不到。我有一个与此类似的表格。我也尝试过使用Ajax，但无法这样做。请帮我。现在，我也无法插入数据库。

   <form id="a" onsubmit="return func();">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

jQuery

     function func(){   
    $.ajax({
          url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}

Answer 1

即使不使用“ ＃”，也不要使用“ action ”属性

如果使用AJAX，请使用“ Return False ”

    $.ajax({
        url     : "example.php",
        type    : 'POST',
        data    : $(this).serialize();
        success: function(result){
        }
    });
    return false;

Answer 2

确保所有表格都有唯一的ID 在jquery中处理Submit事件时，从表单中删除action="#"和onsubmit=""

  	     function func(id){ 
      	     	alert($('#'+id).serialize())  
		    $.ajax({
		          url:'registration_detail.php',// in this you got serialize form data via post request
		        type    : 'POST',
		        data    : $('#'+id).serialize(),
		        success: function(response){
		            console.log(response);            
		        }
		    });
		     return false;
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

        <form id="b" onsubmit="return func('b');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>
        <form id="c" onsubmit="return func('c');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

id="a"对于所有表格都应该是唯一的

在您的代码中，新变量reg_id将给出未定义的变量错误，这可能是重新加载页面的原因。

Answer 3

使用以下代码：

<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    </head>
    <body>
        <form  onsubmit="return func();">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <input type="text" name="email">
        <input type="submit">
        </form>
    </body>
    <script>
function func(){   
    $.ajax({
        url     : "example.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('form').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}
</script>
</html>

Answer 4

我非常确定您也希望GET URL也为POST。显然，下面的代码在这里不能在此站点上运行，但是它显示了正确的AJAX发布的概念。

//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
  $.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
    console.log(jsonObjResp);
  }, 'json');
  e.preventDefault();
});
}); // load end
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}
label{
  display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
  width:calc(100% - 80px);
}
input{
  padding:5px 7px;
}
input[type=submit]{
  display:block; margin:0 auto;
}
#form>*{
  margin-bottom:5px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <form id='form'>
      <label for='fname'>First Name</label><input type='text' id='fname' value='' />
      <label for='lname'>Last Name</label><input type='text' id='lname' value='' />
      <label for='email'>Email</label><input type='text' id='email' value='' />
      <input type='submit' id='submit' value='submit' />
    </form>
  </div>
</body>
</html>

Answer 5

  $(document).ready(function(){
    $("form").on("submit", function(){
    var form_id = $(this).attr("id");
    $.ajax({
       url     : "example.php",
       type    : 'POST',
       data    : $("#"+form_id).serialize(),
       success: function(result){
       }
    });
    return false;
    })
  })

如果不使用php和ajax调用重新加载页面，则无法提交表单

5 个答案: