如果不使用php和ajax調用重新加載頁面，則無法提交表單
[英]Unable to submit form without reloading page using php and ajax call
問題描述
我在頁面上有很多表格。 我想提交每個表單而無需重新加載頁面。 我嘗試了很多方法，但是做不到。 我有一個與此類似的表格。 我也嘗試過使用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;
}
5 個解決方案
解決方案1
1 2019-07-12 06:13:16
即使不使用“ ＃ ”也不要使用“ action ”屬性
如果使用AJAX，請使用“ Return False ”
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
解決方案2
0 已采納 2019-07-12 06:15:44
確保在處理jquery中的Submit事件時，所有表單都有唯一的ID，從表單中刪除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將給出未定義的變量錯誤，這可能是重新加載頁面的原因。
解決方案3
0 2019-07-12 06:43:40
使用以下代碼：
<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>
解決方案4
0 2019-07-12 07:12:44
我很確定您也希望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>
解決方案5
0 2019-07-12 07:42:09
$(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頁面，而無需使用Submit按鈕重新加載
[英]submitting form to PHP page without reloading using the submit button
提交表單而無需重新加載或離開當前頁面（php- mysql）
[英]Submit form without reloading or leaving current page (php- mysql)
提交一個php表單並在div上顯示其結果而不重新加載頁面
[英]Submit a php form and display its result on div without reloading page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.