我正在创建一个程序,并且无法将用户凭据传递到数据库中。我正在使用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";
}
?>
第一个问题。你没有将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");
}
});
}
你在双引号中写了“postData”,因此它将被视为字符串,但实际上它是可变的。
试试:
$.ajax({
type: "POST",
url: "phpScripts/signup.php",
data: postData,
dataType: "text",
});
问题是您使用的是“postData”,它只是一个字符串,但您需要使用postData,因为它已经有了定义。
只需替换“postData”
用postData
阿贾克斯
$.ajax({
type: "POST",
url: "phpScripts/signup.php",
data: postData,
dataType: "text",
});
异步函数中的$ .ajax()。您需要使用其成功(结果,状态,xhr)回调来显示实际的成功消息。
你正在做的是在Ajax调用之外显示成功警报。
代码应该是:
$.ajax({
type: "POST",
url: "phpScripts/signup.php",
data: postData,
dataType: "text",
success: function(html){
$("#results").append(html);
}
});
你的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>
基本上你需要获得文本框的价值。并且在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>
你需要改变
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";
}