如何使用AJAX从数据库检索数据并将结果保存在变量中？
如何使用AJAX从数据库检索数据并将结果保存在变量中？
提问于 2020-01-16 06:30:27
我是jQuery和AJAX的新手，我正在处理一个登录页面作为一个项目，我需要使用AJAX从数据库中检索数据。我的英语不是100%流利，所以我会尽我最大的努力来解释这个问题(借助谷歌翻译)。下面是我使用的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<form validate="">
<input type="text" placeholder="Username" id="username" required/><br />
<input type="password" placeholder="Password" id="password" required/><br />
<input type="submit" id="submit" value="Login" />
</form>
<script type="text/javascript">
// when document is loaded
$(document).ready (
// when submit is clicked
$("#submit").click (
// sets test to null
var test = null;
// sets username to value of username input
var username = document.getElementById("username").value;
// AJAX request
$.ajax({
type: "POST",
async: true,
url: test.php,
data: {username: username},
success: function (data) {
test = data;
console.log(test);
return test;
}
});
);
);
</script>
</body>
</html>test.php
<?php
// connects to database
$conn = mysqli_connect('server', 'username', 'password', 'database');
// sets var username to POST username value
$username = $_POST['username'];
// SQL Query
$sql = "SELECT * FROM users WHERE username='" . $username . "'";
$result = mysqli_query($conn, $sql);
// sets result to mysqli_fetch_assoc()
$result = mysqli_fetch_assoc( $result );
// echos $result
echo $result['password'];
// closes database connection
mysqli_close( $conn );
?>控制台日志
控制台输出：`当前DOM输入元素应具有自动完成属性(建议：“-password”)：(更多信息：https://www.googlesite.com)
未捕获的SyntaxError:意外的令牌变量ajax.html:19
I've looked at the code and I can't seem to find an error.
Thanks in advance! ;)
>P.S.
>It's probably going to end up being some stupid typo.
>Other than that, have a great day!Stack Overflow用户
回答已采纳
发布于 2020-01-16 06:54:46
您可以使用submit而不是click事件。
在您的情况下，只需将id给您的form，如下所示-
<form validate="" id="submit">现在，在您的js脚本中-
$(function() { //shorthand document.ready function
$('#submit').on('submit', function(e) {
e.preventDefault(); //prevent form from submitting
console.log(data);
$.ajax({
type: "POST",
async: true,
url: test.php,
data: $(this).serializeArray(),
success: function (data) {
console.log(data);
}
});
});
});所以检查你的整个代码-
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<form validate="" id="submit">
<input type="text" placeholder="Username" id="username" required/><br />
<input type="password" placeholder="Password" id="password" required/><br />
<input type="submit" value="Login" />
</form>
<script type="text/javascript">
// when document is loaded
$(function() { //shorthand document.ready function
$('#submit').on('submit', function(e) {
e.preventDefault(); //prevent form from submitting
console.log(data);
$.ajax({
type: "POST",
async: true,
url: test.php,
data: $(this).serializeArray(),
success: function (data) {
console.log(data);
}
});
});
});
</script>
</body>
</html>希望这能对你有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59760481
复制相关文章
相似问题
腾讯云开发者
