AJAX .post方法不将数据传递给PHP脚本

问题描述 投票:2回答:7

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

submitInfo()函数似乎完全绕过嵌套在里面的.post函数,因为页面确实在按下提交后通知我成功的登录警报。

这是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";
}


?>
javascript php html
7个回答
0
投票

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

第二个问题。你的postDataarray但它必须是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");
        }
    });
}

3
投票

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

试试:

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

1
投票

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

只需替换“postData”

用postData

阿贾克斯

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

0
投票

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

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

代码应该是:

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

0
投票

你的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>

0
投票

基本上你需要获得文本框的价值。并且在Ajax函数中,您需要作为Object传递(目前您作为String传递)

<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>

0
投票

你需要改变

data: "postData",

data: postData,

并在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脚本中添加此行

$result=$stmt->execute($data);
if($result){
    echo "true";
}
else{
    echo "false";
}
© www.soinside.com 2019 - 2024. All rights reserved.