AJAX .post方法未将数据传递到PHP脚本

Question

我正在创建一个程序，无法将用户凭据传递到数据库中。 我正在使用AJAX .post函数，由于某种原因，数据未传递到PHP脚本中。

commitInfo（）函数似乎完全绕过了嵌套在其中的.post函数，因为在按Submit后，页面确实以成功登录警报通知我。

这是HTML / JS文件，（未显示jQuery的实现以及我正在用来哈希密码的导入的MD5函数）：

<h2>First name:<h2>
<input id="firstNameInput" type="text" maxLength="20">

<h2>Last name:<h2>
<input id="lastNameInput" type="text" maxLength="20">

<h2>Create a username:<h2>
<input id="createUserInput" type="text" maxLength="20">

<h2>Create a password:<h2>
<input id="createPassInput" type="text" maxLength="20">
</br>
</br>
<input id="submitCredsButton" type="submit" onclick="submitInfo()">

<script>
function submitInfo()
{
var postData = [{
  firstName : document.getElementById("firstNameInput"),
  lastName : document.getElementById("lastNameInput"),
  username : document.getElementById("createUserInput"),
  hashPass : MD5((document.getElementById("createPassInput")).value)
}];

$.ajax({
  type: "POST",
  url: "phpScripts/signup.php",
  data: "postData",
  dataType: "text",
});

alert("Sign up Successful! Please log in to enter.");
window.open("login.php", "_self");
}
</script>

这是PHP脚本，在单独的文件中：

<?php
$servername = "*****";
$username   = "*****";
$password   = "*****";
$dbname     = "*****";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);    
  }

//posts data to db
$stmt = $data->('INSERT INTO userlist 
(firstName,lastName,username,hashedPass)
        VALUES (:firstName, :lastName, :username, :hashPass)');

$stmt->execute($data);
?>

-edit-弄清楚了一切，我遇到的一个简单但被忽略的错误就是我在单引号和双引号中的位置。 感谢所有帮助我解决JS问题的用户！

HTML / JS：

<h2>First name:<h2>
<input id="firstNameInput" type="text" maxLength="20">

<h2>Last name:<h2>
<input id="lastNameInput" type="text" maxLength="20">

<h2>Create a username:<h2>
<input id="createUserInput" type="text" maxLength="20">

<h2>Create a password:<h2>
<input id="createPassInput" type="text" maxLength="20">
</br>
</br>
<input id="submitCredsButton" type="submit" onclick="submitInfo()">

<script>
function submitInfo()
{
    var fName =  document.getElementById("firstNameInput").value;
    var lName =  document.getElementById("lastNameInput").value;
    var uName =  document.getElementById("createUserInput").value;
    var pPass =  document.getElementById("createPassInput").value;
    var hPass =  MD5((document.getElementById("createPassInput")).value);

if(fName.length <= 0 || lName.length <= 0 || uName.length <= 0 || pPass.length <= 0)
{
  alert("Please verify all fields have been filled out.");
}
else
{
  $.ajax
  ({
    type: "POST",
    url: "phpScripts/signup.php",
    data: {firstName: fName, lastName: lName, userName: uName, hashPass: hPass},
    dataType: "text",
    success: function(response)
      {
        alert("Sign up Successful! Please log in to enter.");
        window.open("login.php", "_self");
      }
  });
}




}
</script>

PHP脚本：

<?php


$servername = "******";
$username = "******";
$password = "******";
$dbname = "******";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error); }

?>


<?php
//posts data to db
$fName = $_POST["firstName"];
$lName = $_POST["lastName"];
$uName = $_POST["userName"];
$hPass = $_POST["hashPass"];

$sql = "INSERT INTO userlist ( firstName,lastName,username,hashedPass )
        VALUES ( '$fName', '$lName','$uName','$hPass' )" ;

$result = $conn->query($sql);

if($result){
echo "true";
}
else{
echo "false";
}


?>

Answer 1

您已经在双引号中写了“ postData”，因此它将被视为字符串，但实际上它是可变的。

尝试：

$.ajax({
  type: "POST",
  url: "phpScripts/signup.php",
  data: postData,
  dataType: "text",
});

Answer 2

问题是您正在使用的“ postData”只是一个字符串，但是您需要使用postData，因为它已经有了定义。

只需替换“ postData”

与postData

阿贾克斯

    $.ajax({
   type: "POST",
   url: "phpScripts/signup.php",
   data: postData,
   dataType: "text",
});

Answer 3

您的postData是一个对象，不需要在引号“”中四舍五入，并且包含成功回调和成功回调，请尝试在登录页面上进行重定向。 尝试这个：

<script>
function submitInfo()
{
var postData = [{
  firstName : document.getElementById("firstNameInput"),
  lastName : document.getElementById("lastNameInput"),
  username : document.getElementById("createUserInput"),
  hashPass : MD5((document.getElementById("createPassInput")).value)
}];

$.ajax({
  type: "POST",
  url: "phpScripts/signup.php",
  data: postData,
  dataType: "text",
  success: function(response){
      alert("Sign up Successful! Please log in to enter.");
      window.open("login.php", "_self");
  }
});
}
</script>

Answer 4

基本上，您需要获取文本框的价值。 而且在Ajax函数中，您需要作为一个对象传递（当前，您作为字符串传递）

<script>
function submitInfo()
{
var postData = [{
  firstName : document.getElementById("firstNameInput").value,
  lastName : document.getElementById("lastNameInput").value,
  username : document.getElementById("createUserInput").value,
  hashPass : MD5(document.getElementById("createPassInput").value)
}];

$.ajax({
  type: "POST",
  url: "phpScripts/signup.php",
  data: postData,
  dataType: "text",
});

alert("Sign up Successful! Please log in to enter.");
window.open("login.php", "_self");
}
</script>

Answer 5

$ .ajax（）在异步函数中。 您需要使用其成功（结果，状态，xhr）回调来显示实际的成功消息。

您正在做的是在Ajax调用之外显示成功警报。

代码应为：

$.ajax({
  type: "POST",
  url: "phpScripts/signup.php",
  data: postData,
  dataType: "text",
  success: function(html){
    $("#results").append(html);
  }
});

Answer 6

你需要改变

data: "postData",

同

data: postData,

并在dataType: "text",之后添加成功变量dataType: "text",

success: function(res){
    if(res=="true"){
        alert("Sign up Successful! Please log in to enter.");
    }
    else{
        alert("something went wrong.");
    }
}

并在$stmt->execute($data);之后在您的php脚本中添加此行$stmt->execute($data);

$result=$stmt->execute($data);
if($result){
    echo "true";
}
else{
    echo "false";
}

Answer 7

第一个问题。 您没有将string传递给$.ajax 。 您必须传递作为object的变量： data: postData,

第二个问题。 您的postData是一个array但必须是一个object ：

var postData = {
  firstName : document.getElementById("firstNameInput"),
  lastName : document.getElementById("lastNameInput"),
  username : document.getElementById("createUserInput"),
  hashPass : MD5((document.getElementById("createPassInput")).value)
};

第三个问题。 您正在将DOM objects作为postData而不是其值进行传递。 只需使用.value属性：

var postData = {
  firstName : document.getElementById("firstNameInput").value,
  lastName : document.getElementById("lastNameInput").value,
  username : document.getElementById("createUserInput").value,
  hashPass : MD5((document.getElementById("createPassInput")).value)
};

第四个问题。 $.ajax是异步的，因此您必须提供一个成功回调，因此该回调将在请求完成后立即运行：

$.ajax({
    type: "POST",
    url: "phpScripts/signup.php",
    data: postData,
    dataType: "text",
    success: function () {
        alert("Sign up Successful! Please log in to enter.");
        window.open("login.php", "_self");
    }
});

完整的解决方案：

function submitInfo()
{
    var postData = {
      firstName : document.getElementById("firstNameInput").value,
      lastName : document.getElementById("lastNameInput").value,
      username : document.getElementById("createUserInput").value,
      hashPass : MD5((document.getElementById("createPassInput")).value)
    };

    $.ajax({
        type: "POST",
        url: "phpScripts/signup.php",
        data: postData,
        dataType: "text",
        success: function () {
            alert("Sign up Successful! Please log in to enter.");
            window.open("login.php", "_self");
        }
    });
}