尝试使用jQuery向PHP提交表单

Attempting to submit a form to PHP using jQuery

本文关键字：PHP 提交 表单 jQuery      更新时间：2023-09-26

我创建了一个非常基本的HTML表单，它使用PHP将值传递给SQL数据库。我试图通过jquery ajax方法做到这一点，因为我不希望页面重新加载(这似乎也是最简单的方法之一)。

但是它似乎不工作，PHP页面返回一个500的错误代码。

需要马上警告你，这是我第一次尝试，所以很可能是我的语法犯了一个非常愚蠢的错误

HTML: 

<form id ="form1">
    <input type="text" name="Test">
    <br><br>
    <input type="number" name="TestNumber">
    <br><br>
    <input type="radio" name="sex" value="male" checked>  Male
    <br>
    <input type="radio" name="sex" value="female"> Female
    <br><br>
    <input type="submit" value="Submit">
</form>
Javascript: 

$(document).ready(function() {
    console.log("jquery ready");
    var frm = $('#form1');
    frm.submit(function(ev) {
        $.ajax({
            type: "POST",
            url: "form_validation.php",
            data: frm.serialize(),
            success: function(data) {
                alert('ok');
            }
        });
        ev.preventDefault();
    });
});
PHP: 

<html>
    <head>
        <title>Untitled</title>
    </head>
    <body>
        <?php
        $servername = "server";
        $username = "user";
        $password = "pass";
        $dbname = "name";
        $test = $_POST[Test];
        $testNumber = $_POST[TestNumber];
        $sex = $_POST[sex];

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
        $sql = "INSERT INTO test (Test, TestNumber, sex, date)
        VALUES ('$test', '$testNumber', '$sex', now())";
        $sqlback = "SELECT ID FROM `test` WHERE sex = ''Male''";
        if ($conn->query($sql) === TRUE) {
            echo "New record created successfully" + . $sqlback;
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
        $conn->close();
        ?> 
    </body>
</html>

这一行导致错误。请移除+ 

echo "New record created successfully" + . $sqlback;

也测试你的post变量:

$test = isset($_POST[Test]) ? $_POST[Test] : "";

现在$test总是包含一个值。如果$_POST[Test]是undefined，将引发错误。

您的页面当前返回500 internal server error。当出现错误并且错误报告关闭时，PHP会这样做。

请在php.ini中打开错误报告。它回显在服务器端脚本中引发的错误，您可以在ajax请求的网络选项卡中捕获该错误。

小费作为奖励:

您正在加载一个完整的页面(HTML主体内的PHP代码)。当使用像这样的ajax调用而不是完整的HTML页面时，您只想返回成功或失败。目前常用的方法是使用JSON。

基于你的代码的例子，使用PHP的json_encode返回JSON:

if ($conn->query($sql) === TRUE) {
  echo json_encode(array("message" => "New record created successfully", "sql" => $sqlback));
} else {
   echo json_encode(array("error" => $sql . "<br>" . $conn->error));
}

现在data-type将是JSON。jQuery可能会猜到，但是您可以在ajax()选项中设置data-type : JSON。jQuery使用JSON.parse将data自动解析为有效的Javascript。

现在可以在success子句中进行测试:

        success: function(data) {
            if (data.error)
            {
               alert(data.error);
            }
            else
            {
               alert(data.message + " " + data.sql);
            }
        }
安全建议

: 

$sql = "INSERT INTO test (Test, TestNumber, sex, date)
VALUES ('$test', '$testNumber', '$sex', now())";

这一行容易受到sql注入的影响。在mysqli中使用prepared statements 

$sql = $conn->prepare("INSERT INTO test(Test, TestNumber, sex, date) VALUES (?, ?, ?, ?)");
$sql->bind_param("siss", $test, $testnumber, $sex, now()); //s = string, i = number
$sql->execute(); //execute the query;
$sql->close(); //close the statement.
相关文章：