使用表单提交通过ajax jQuery post保存数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15308017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save data through ajax jQuery post with form submit
提问by Methew
I have a form and I want to save data through ajax jQuery post. If the save button is type="submit", it does not do any this just empty alert... I want to save data and remain on same form with refresh fields...
我有一个表单，我想通过 ajax jQuery post 保存数据。如果保存按钮是type="submit"，它不会做任何事情，这只是空警报......我想保存数据并保持与刷新字段相同的表单......
Here is what I have tried:
这是我尝试过的：
$("#saveNewContact").click(function () {
var name = $("#name").val();
var last_name = $("#last_name").val();
$.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
success: function(msg){
alert(msg);
});
});
and here is my form
这是我的表格
<form id="myForm" action="#" method="post">
<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<input name="name" id="name" value="" tabindex="5" readonly="" type="text">
<input name="name" id="name" value="" tabindex="5" readonly="" type="text">
<button type="submit" id="update" style="display:none;"
class="save_button saveHEX" name="Update"
value="Update Listing">Save Lead</button></td>
</tr>
</table>
</form>
回答by Roger
Do it this way
这样做
HTML
HTML
<form name="frm" method="POST" action="">
<input type="text" name="name" id="name" value="" />
<input type="text" name="last_name" id="last_name" value="" />
<input type="submit" name="Update" id="update" value="Update" />
</form>
Your jQuery
你的jQuery
$("#update").click(function(e) {
e.preventDefault();
var name = $("#name").val();
var last_name = $("#last_name").val();
var dataString = 'name='+name+'&last_name='+last_name;
$.ajax({
type:'POST',
data:dataString,
url:'insert.php',
success:function(data) {
alert(data);
}
});
});
So in the insert.phppage
所以在insert.php页面
<?php
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$insert = "insert into TABLE_NAME values('$name','$last_name')";// Do Your Insert Query
if(mysql_query($insert)) {
echo "Success";
} else {
echo "Cannot Insert";
}
?>
Hope this gives an Idea
希望这给出了一个想法
回答by Dipesh Parmar
You do not need click event for this remove $("#saveNewContact").click(function () {and use .submit()jQuery method.
您不需要此删除$("#saveNewContact").click(function () {和使用.submit()jQuery 方法的单击事件。
Also use .serialize that allow you to serialize form fields with value and create urlencoded dataString.
还可以使用 .serialize 来序列化具有值的表单字段并创建 urlencoded dataString。
$("#myForm").on("submit",function (e)
{
e.preventDefault();
var formData = $(this).serialize();
$.ajax(
{
type:'post',
url:'receiver url',
data:formData,
beforeSend:function()
{
launchpreloader();
},
complete:function()
{
stopPreloader();
},
success:function(result)
{
alert(result);
}
});
});
回答by mplungjan
Bind the form's submit instead AND no success in the $.post necessary, the function is enough:
绑定表单的提交而不需要在 $.post 中成功，该功能就足够了：
$(function() {
$("#myForm").on("submit",function (e) {
e.preventDefault(); // stop the normal submission
var name = $("#name").val();
var last_name = $("#last_name").val();
$.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
function(msg){
alert(msg);
$("#name").empty();
$("#last_name").empty();
});
});
});
