我正在尝试使用jQuery包装的AJAX对用户进行身份验证,以调用查询MySQL数据库的PHP脚本。我不熟悉这些技术中的任何,但我(在某种程度上)设法使它们单独工作,但我无法使jQuery、AJAX和HTML正常工作。
[编辑:]我听从了Trinh Hoang Nhu的建议,添加了一个return false;
语句来禁用"提交"按钮。所有以前的错误都修复了,我无法正确地获得AJAX返回的对象。
HTML
这是我使用的HTML片段:
<form id="form" method='post'>
<label>Username:</label>
<input id="user" name="user" type="text" maxlength="30" required /> <br />
<label>Password:</label>
<input id="pass" name="pass" type="password" maxlength="30" required /> <br />
<input id="url" name="url" type="text" value="<?php echo $_GET['url'] ?>" hidden />
<input name="submit" type="submit" value="I'm done">
</form>
jQuery/AAJAX
以下是我的jquery代码,用于使用AJAX对用户进行身份验证(很抱歉,如果因为选项卡而导致缩进混乱):
function changeMessage(message) {
document.getElementById("message").innerHTML = message; }
$(document).ready(function() {
$("#form").submit(function() {
changeMessage("Checking");
//check the username exists or not from ajax
$.post("/stufftothink/php/AJAX/login.php",
{user: $("#user").val(), pass: $("#pass").val(), url: $("#url") },
function(result) {
//if failed
if (result === 'false') {
changeMessage("Invalid username or password. Check for typos and try again");
$("#pass").val(""); }
//if authenticated
else {
changeMessage("Authenticated");
window.location.href = result; }
} );
//to disable the submit button
return false;
} );
} )
PHP
这是我的PHP脚本,它被称为:
<?php
ob_start();
session_start();
$user = $_POST['user'];
$pass = md5($_POST['pass']);
mysql_connect('localhost', 'root', '');
mysql_select_db('stufftothink');
$query = "select * from users where user = '$user' and pass = '$pass'";
$result = mysql_query($query);
$i = 0;
while ($row = mysql_fetch_array($result)) {
$i = 1; }
if ($i == 1) {
$_SESSION['user'] = $user;
$invalid_urls = array('register.php', 'login.php');
$url = $_REQUEST['url']; //not sure whether _GET or _POST
if (in_array($url, $invalid_urls)) {
echo '/stufftothink/profile.php'; }
else {
echo '/stufftothink/'.$url; }
}
else {
echo 'false'; }
mysql_close();
?>
编辑
在这个问题上我得到了很多反对票。我不小心提交了没有填写解释的问题。我回去编辑了它,但当我回来时,已经有4张反对票了。仅仅过了几分钟。是我做错了什么,还是前5分钟有问题?
首先,如果要使用ajax提交表单,则必须使用提交函数中的return false
。否则,您的浏览器将处理它并将您重定向到另一个页面。
如果你想从PHP返回一个对象,你必须使用json_encode
将其转换为json,例如:
//PHP
$return = array("url" => "http://www.google.com");
echo json_encode($return);
//would echo something like {"url":"http://www.google.com"}
//JS
$.post(url, data, function(data){
alert(data.url);
});
函数上没有结束的;
。
应为:
function changeMessage(message) {
document.getElementById("message").innerHTML = message;
};
$(document).ready(function() {
$("#form").submit(function() {
changeMessage("Checking");
//check the username exists or not from ajax
$.post("/stufftothink/php/AJAX/login.php",
{user: $("#user").val(), pass:$("#pass").val() },
function(result) {
//if failed
if (result === 'false') {
changeMessage("Invalid username or password. Check for typos and try again");
$("#pass").val("");
}
//if authenticated
else {
changeMessage("Authenticatred");
window.location.href = "/stufftothink/" + result;
}
});
});
});
不确定这是否能解决问题,但这是我唯一想到的问题。