Question

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

HTML / JS PAGE

<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

<?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();
?>

Answer 1

如果页面上有多个表单，则需要更改：

$('form').serialize(),

为：

$(this).serialize(),

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

我还建议PHP回显指示它是否成功，然后可以显示AJAX成功函数。

您还应该清理脚本的输入，并将mysql_xxx函数转换为mysqli_xxx或PDO，最好使用参数化查询。

Answer 2

以下是根据您的代码进行的测试。我在那里做了一些修改。首先，我放入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>

这是php代码。我只是回显一个字符串而不是数据库。当我点击“保存”按钮而不刷新页面时，我可以看到警报。

<?php echo "success"; ?>

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

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

PHP如何使用ajax表单提交

2 个答案: