javascript PHP如何使用ajax提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18424970/
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
PHP how to form submit using ajax
提问by Boy Pasmo
I am trying a simple ajax request that does not need to refresh the page upon submit. But I think I did it the wrong way. Any help would be much appreciated.
我正在尝试一个不需要在提交时刷新页面的简单 ajax 请求。但我认为我做错了。任何帮助将非常感激。
HTML/JS PAGE
HTML/JS 页面
<script>
$(function () {
$('form#person').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'addAPerson.php',
data: $(this).serialize(),
success: function (o) {
=====> console.log(o); <=== I TRIED DOING THIS BUT NOTHING IS PRINTED
alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
}
});
e.preventDefault();
});
});
</script>
<form id="person" action="addAPerson.php" method="post">
Firstname: <input name="fname" />
Lastname: <input name="lname" />
<input type="reset" style="float:right"name="cancel" value="cancel"/>
<input type="submit" name="submit" value="save"/>
</form>
addAPerson.php
添加APerson.php
<?php
$fname = $_POST['fname'];
$lname =$_POST['lname'];
$con = mysql_connect("localhost","root","");
mysql_select_db("person",$con);
$sql = "INSERT INTO person(firstname, lastname) VALUES('$fname', '$lname')";
mysql_close();
?>
采纳答案by Barmar
if you have more than one form on the page, you need to change:
如果页面上有多个表单，则需要更改：
$('form').serialize(),
to:
到：
$(this).serialize(),
Otherwise it will include fields from all the forms in the parameters to this script.
否则，它将在此脚本的参数中包含来自所有表单的字段。
I'd also recommend that the PHP echo something to indicate whether it was successful or not, which the AJAX success function can then display.
我还建议 PHP 回显一些内容来指示它是否成功，然后 AJAX 成功函数可以显示它。
You should also sanitize the inputs to the script, and convert from the mysql_xxx functions to mysqli_xxx or PDO, preferably using parametrized queries.
您还应该清理脚本的输入，并将 mysql_xxx 函数转换为 mysqli_xxx 或 PDO，最好使用参数化查询。
回答by Sithu
Following is my test based on your codes. I have a few modification in there. First, I put in jQuery link and add "type" to each textbox.
以下是我根据您的代码进行的测试。我在那里有一些修改。首先，我放入 jQuery 链接并为每个文本框添加“类型”。
<html>
<head>
<script src="./jquery-1.9.1.min.js"></script>
<script>
$(function () {
$('form#person').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'test.php',
data: $('form').serialize(),
success: function () {
alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
}
});
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="person" method="post">
Firstname: <input name="fname" type="text" />
Lastname: <input name="lname" type="text" />
<input type="reset" style="float:right"name="cancel" value="cancel"/>
<input type="submit" name="submit" value="save" />
</form>
</body>
This is php code. Instead of wirting to database I simply echo a string. I can see the alert when I click "save" button without refreshing the page.
这是php代码。我只是简单地回显一个字符串，而不是写入数据库。当我点击“保存”按钮而不刷新页面时，我可以看到警报。
<?php echo "success"; ?>
Here is an alternative for your requirement. They provide source code which you can download and test run at local.
这是您的要求的替代方案。他们提供源代码，您可以下载并在本地测试运行。
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
