Fatal编程技术网
  • php/
  • PHP如何使用ajax表单提交

PHP如何使用ajax表单提交

php javascript jquery html ajax

PHP如何使用ajax表单提交,php,javascript,jquery,html,ajax,Php,Javascript,Jquery,Html,Ajax,我正在尝试一个简单的ajax请求，提交时不需要刷新页面。但我想我做得不对。任何帮助都将不胜感激 HTML/JS页面 <script> $(function () { $('form#person').on('submit', function(e) { $.ajax({ type: 'post', url: 'addAPerson.php',

我正在尝试一个简单的ajax请求，提交时不需要刷新页面。但我想我做得不对。任何帮助都将不胜感激

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>


$（函数（）{
$（'form#person'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:'addAPerson.php'，
数据：$（this）.serialize（），
成功：功能（o）{

====>console.log（o）；如果页面上有多个表单，则需要更改：


$('form').serialize(),


致：

否则，它将包括此脚本参数中所有表单的字段

我还建议PHP回显一些东西来指示它是否成功，然后AJAX成功函数可以显示这些东西


您还应该清理脚本的输入，并将mysql_xxx函数转换为mysqli_xxx或PDO，最好使用参数化查询。
以下是基于您的代码的测试。我在其中做了一些修改。首先，我输入jQuery链接并向每个文本框添加“type”


<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>




$（函数（）{
$（'form#person'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:'test.php'，
数据：$（'form'）。序列化（），
成功：函数（）{
警报（“必须发出警报以确定成功页面”）；
}
});
e、 预防默认值（）；
});
});     
名字：
姓氏：




这是php代码。我没有连接到数据库，而是简单地回显一个字符串。我可以在单击“保存”按钮时看到警报，而不刷新页面


<?php echo "success"; ?>






这是一个满足您需求的替代方案。它们提供源代码，您可以在本地下载并测试运行


首先，这个
需要更改为
，对另一个做同样的操作。@Fred ii-
type=“text”
是默认设置。@Barmar哦，我现在还不知道。谢谢你添加的信息，我会记住的。（称之为习惯）；-）不知道是否有必要，但是URL的完整路径可能很好？？？@Barmar，因为Ajax已经包含
action=“addAPerson.php”
，是否仍有必要将其作为表单操作？我记得看到很多次，它不必位于表单内部，只需Ajax，只要它指向表单的ID，对吗？感谢这一小小的错误，但是..我唯一的问题是我的表单已成功提交，但数据不在其中。我仍然需要刷新它他打开页面查看插入的数据。有什么建议吗？谢谢您需要将代码放入更新DOM以显示新数据的
success
函数中。在传统表单提交中，可能会发生这种情况，因为它会重新加载页面，但在使用AJAX时需要显式编码。我尝试使用console.log（）“o”没有打印任何内容。对不起，我对ajax请求还是新手。谢谢你的帮助。哦，对不起。我刚刚编辑了我的文章。应该怎么做才能打印我插入的数据？再次感谢你的帮助。你读过ajax教程吗？我不会教你如何在这种设置下使用ajax，教程应该会显示谢谢你的帮助：）

<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>



<?php echo "success"; ?>