不向.post脚本传递数据的AJAX PHP方法
不向.post脚本传递数据的AJAX PHP方法
提问于 2018-05-29 13:35:51
我正在创建一个程序，在将用户凭据传递到数据库时遇到了问题。我正在使用AJAX .post函数，但是由于某些原因，数据没有被传递到PHP脚本中。
submitInfo()函数似乎完全绕过了嵌套在其中的.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);
?>-编辑-弄清楚了，我有一个简单但被忽视的错误是我把单引号和双引号放在了哪里。感谢所有帮助我解决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";
}
?>回答 6
Stack Overflow用户
回答已采纳
发布于 2018-05-29 13:47:52
第一个问题。您没有向$.ajax传递string。您必须传递一个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");
}
});
}Stack Overflow用户
发布于 2018-05-29 13:38:34
您编写了双引号中的"postData“，因此它将被视为字符串，但实际上它是可变的。
尝试：
$.ajax({
type: "POST",
url: "phpScripts/signup.php",
data: postData,
dataType: "text",
});Stack Overflow用户
发布于 2018-05-29 13:38:51
您的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50576959
复制相关文章
相似问题