2

我正在尝试一个简单的 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>

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

2 回答 2

2

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

$('form').serialize(),

至：

$(this).serialize(),

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

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

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

于 2013-08-25T02:14:42.387 回答
0

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

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

<?php echo "success"; ?>

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

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

于 2013-08-25T02:36:31.097 回答