AJAX 表单不会发布

Question

大家好，我正在尝试在不重新加载页面的情况下提交表单，这对于 AJAX 来说似乎很简单，但我似乎无法对我的数据库进行任何更改。如果 AJAX 成功，我在我的 javascript 中设置了一个警报，它似乎每次都会触发，所以我认为变量确实是从 AJAX 发送出去的，但是当我进入 join.php 时，我不要认为它记得，因此不能正确处理。

首先，这里是相关的script.js：

$(document).ready(function () {
    //----SUBMIT---//
    $(".submit").click(function () {
        // validate and process form here  

        $('.error').hide();
        var studentEmail = $("input#studentEmail").val();
        if (studentEmail == "") {

            $("label#studentEmail_error").show();
            $("input#studentEmail").focus();
            return false;
        }

        var studentPassword = $("#studentPassword").val();
        var parentEmail = $("#parentEmail").val();
        var parentPassword = $("#parentPassword").val();
        var studentFirstName = $("#studentFirstName").val();
        var studentLastName = $("#studentLastName").val();
        var studentPhone = $("#studentPhone").val();
        var parentFirstName = $("#parentFirstName").val();
        var parentLastName = $("#parentLastName").val();
        var parentPhone = $("#parentPhone").val();


        var dataString = 'studentEmail=' + studentEmail 
                         + '&studentPassword=' + studentPassword 
                         + '&parentEmail=' + parentEmail 
                         + '&parentPassword=' + parentPassword 
                         + '&studentFirstName=' + studentFirstName 
                         + '&studentLastName=' + studentLastName 
                         + '&studentPhone=' + studentPhone 
                         + '&parentFirstName=' + parentFirstName 
                         + '&parentLastName=' + parentLastName 
                         + '&parentPhone=' + parentPhone;

        alert(dataString);

        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function () {
                alert("success");
            }
        });
        return false;
    });
});

然后加入.php

if($_POST) {
    $studentEmail=$_POST['studentEmail'];
    $studentPassword=$_POST['studentPassword'];
    $parentEmail=$_POST['parentEmail'];
    $parentPassword=$_POST['parentPassword'];
    $studentFirstName=$_POST['studentFirstName'];
    $studentLastName=$_POST['studentLastName'];
    $studentPhone=$_POST['studentPhone'];
    $parentFirstName=$_POST['parentFirstName'];
    $parentLastName=$_POST['parentLastName'];
    $parentPhone=$_POST['parentPhone'];

    //create database connection
    $connection = mysql_connect("localhost","XXXX","XXXX"); 
        //in case database connection fails
        if(!$connection) {
            die("Database connection failed: ".mysql_error());
        }

        else{

        //select database to use
        $db_select = mysql_select_db("XXXX",$connection); 
            //in case database selection fails
            if (!$db_select) { 
                die("Database selection failed: " . mysql_error()); 
            } 

            else {

            //make sql query
              $sql = "INSERT INTO clients (`studentEmail`, 
                                                   `studentPassword`, 
                                                   `parentEmail`, 
                                                   `parentPassword`,
                                                   `studentFirstName`, 
                                                   `studentLastName`, 
                                                   `studentPhone`, 
                                                   `parentFirstName`, 
                                                   `parentLastName`, 
                                                   `parentPhone`)
                    VALUES ('".$studentEmail."', 
                            '".$studentPassword"', 
                            '".$parentEmail."', 
                            '".$parentPassword."', 
                            '".$studentFirstName."', 
                            '".$studentLastName."', 
                            '".$studentPhone."', 
                            '".$parentFirstName."', 
                            '".$parentLastName."', 
                            '".$parentPhone."')";

                //set results to variables
                $result = mysql_query($sql);

                //in case query fails
                if (!$result) { 
                    die("Database query failed: " . mysql_error()); 
                } 
            }
        }

}

else {
    echo "FAIL";
}

Answer 1

尝试将$.post() 调用更改为：

$.ajax({
    type: "POST",
    url: "join.php",
    data: dataString,
    success: function(data) {
      alert ("Success: "+ data);
    }
});

并且，在 PHP 代码的开头，放置：

var_dump($_POST);

这样，警报消息将显示从 PHP 接收到的数据。

更新：

由于我看到这里没有人看到该代码存在最大的安全风险，因此我在此处添加它：

在将其添加到查询中之前，请务必将帖子中的每个字符串都传递到mysql_real_escape_string()！

如果有人将此作为他的电子邮件地址发布怎么办？？：

'); DROP TABLE clients; -- 

更新：

我仔细检查了 jQuery.ajax() 和 jQuery.post() 的文档。虽然.post() 只是.ajax() 的快捷方式，但它们的语法不同：

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
jQuery.ajax( settings )

（上面也更新了代码）。

更新：

试试这个代码，它应该“开箱即用”：

JavaScript：

$(document).ready(function(){
    $(".submit").click(function() {  

        $('.error').hide();  
        var studentEmail = $("input#studentEmail").val();  
        if (studentEmail == "") {  
            $("label#studentEmail_error").show();  
            $("input#studentEmail").focus();  
            return false;  
        }

        var dataString = {
            studentEmail : studentEmail,
            studentPassword : $("#studentPassword").val(),
            parentEmail : $("#parentEmail").val(),
            parentPassword : $("#parentPassword").val(),
            studentFirstName : $("#studentFirstName").val(),
            studentLastName : $("#studentLastName").val(),
            studentPhone : $("#studentPhone").val(),
            parentFirstName : $("#parentFirstName").val(),
            parentLastName : $("#parentLastName").val(),
            parentPhone : $("#parentPhone").val(),
        };

        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function(data) {
                alert ("success: "+ data);
            }
        });

        return false;
    });
});

PHP 代码

var_dump($_POST);
echo "\n\n"; // Some white space here

if($_POST) {
    $connection = mysql_connect("localhost","XXXX","XXXX"); 
    if(!$connection) {
        die("Database connection failed: ". mysql_error());
    }
    if (!mysql_select_db("XXXX",$connection)) { 
        die("Database selection failed: " . mysql_error()); 
    }

    // Read data from POST
    $studentEmail       = mysql_real_escape_string($_POST['studentEmail']);
    $studentPassword    = mysql_real_escape_string($_POST['studentPassword']);
    $parentEmail        = mysql_real_escape_string($_POST['parentEmail']);
    $parentPassword     = mysql_real_escape_string($_POST['parentPassword']);
    $studentFirstName   = mysql_real_escape_string($_POST['studentFirstName']);
    $studentLastName    = mysql_real_escape_string($_POST['studentLastName']);
    $studentPhone       = mysql_real_escape_string($_POST['studentPhone']);
    $parentFirstName    = mysql_real_escape_string($_POST['parentFirstName']);
    $parentLastName     = mysql_real_escape_string($_POST['parentLastName']);
    $parentPhone        = mysql_real_escape_string($_POST['parentPhone']);

    $sql = "INSERT INTO clients ".
        "(`studentEmail`, `studentPassword`, `parentEmail`, `parentPassword`, ".
        "`studentFirstName`, `studentLastName`, `studentPhone`, `parentFirstName`, ".
        "`parentLastName`, `parentPhone`) ".
        " VALUES ('$studentEmail', '$studentPassword', '$parentEmail', ".
        "'$parentPassword', '$studentFirstName', '$studentLastName', ".
        "'$studentPhone', '$parentFirstName', '$parentLastName', '$parentPhone')";

    $result = mysql_query($sql);
    if ($result) { 
        echo "Database query successful!";
    }
    else {
        die("Database query failed: " . mysql_error()); 
    } 
}

Answer 2

你有一个mysql错误，没有引号：

更正：

$sql = "INSERT INTO clients (`studentEmail`, `studentPassword`, `parentEmail`, `parentPassword`, `studentFirstName`, `studentLastName`, `studentPhone`, `parentFirstName`, `parentLastName`, `parentPhone`)
                        VALUES ('".$studentEmail."', '".$studentPassword"', '".$parentEmail."', '".$parentPassword."', '".$studentFirstName."', '".$studentLastName."', '".$studentPhone."', '".$parentFirstName."', '".$parentLastName."', '".$parentPhone."')";

Answer 3

您是否尝试过使用虚拟值的脚本以确保其正常工作。

您可以从 sql 中删除引号 ("") 并替换为 '$variable'，这会将整个查询转换为字符串。

join.php是否在同一目录下？

您是否在开发者工具中抛出了跨域错误？如果是这样，您可能必须使用 jQuery 解决方法。

Answer 4

无论实际 PHP 代码是否执行，只要收到响应，您的警报都应该触发。

我会尝试在您的 if($_POST) 语句之前放置一个 'echo "TEST"' 语句以进行调试。继续弄乱这个方法，直到你弄清楚你的代码到底在哪里失败。如果它仍然没有执行 POST，请检查 join.php 的文件路径并确保它在同一目录中。

另外，您是尝试在本地执行此操作还是托管在 Web 服务器上？

另一个注意事项，您应该在发布之前在用户输入上使用 encodeURI(..)，这是一种良好的做法。

这是生成数据字符串的方式的重构，请考虑：

//create an object
var dataObj = {};

//get inputs from form with id = formID
//for each input, add a property matching the input id to the dataObj and store the value of the field as the value for that property.
$("#formID :input").each( function (this) {

    var id = this.attr(id); //might be a bit off
    var val = this.val();   //same here

    dataObj[id] = encodeURI(val);

});

语法可能有点不对劲，有一段时间没有这样做了。