PHP如何使用Ajax提交表单

Question

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

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链接，并在每个文本框中添加“类型”。

<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 个解决方案

解决方案1
1 已采纳 2013-08-25 02:14:42

解决方案2
0 2013-08-25 02:36:31

PHP如何使用Ajax提交表单

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-08-25 02:14:42

解决方案2 0 2013-08-25 02:36:31

解决方案1
1 已采纳 2013-08-25 02:14:42

解决方案2
0 2013-08-25 02:36:31