我正在使用jQuery UI模式对话框在用户登录系统上工作，以便在我的html和PHP脚本之间进行交互。最近，我将我的所有用户功能移动到一个PHP文件，之前我在头文件标记中使用了它们。
如果有人输入有效的用户名/密码，我能够使登录功能正常工作，但现在我正在尝试考虑其他可能性，即有人输入有效的用户名但密码不正确，或者如果他们输入用户名那不存在。
我遇到的问题是在Dialog脚本上调用AJAX。我想将登录表单提交到同一页面user.php，并将用户登录，或者返回一条错误消息，该消息将填充同一对话框中的div。
现在，我的代码将返回错误消息，但它也会返回用户表单的副本。不确定我在这里做错了什么...... 任何意见都将不胜感激。
编辑：决定继续发布整个user.php，因为根据一个答案进行更改使得此文件添加的html完全消失。我现在猜测可能有几件事我做错了：
<html>
<span id="user">
<ul>
<?php
//if user is logged in, show name and Log Out option, else show Log In and Sign Up options
if(isset($_COOKIE["user"])) {
setSessionUserData($_COOKIE["user"]);
echo "<li>Logged in as {$_SESSION["username"]}</li>";
echo "<li> | </li>";
echo "<li><a href='#' id='logout_link'>Log Out</a></li>";
} else {
echo "<li><a href='#' id='login_link'>Log In</a></li>";
echo "<li> | </li>";
echo "<li><a href='#'>Sign up</a></li>";
}
?>
</ul>
</span>
<div id="login_dialog" title="Existing User">
<form id="login_form">
<fieldset>
<label for="userid">Username</label>
<input type="text" name="username" id="username" />
<label for="pw">Password</label>
<input type="password" name="pw" id="pw" />
</fieldset>
</form>
<span class = "error"></span>
</div>
<div id="logout_dialog" title="Log Out">
<p><span class="ui-icon ui-icon-alert alert-icon"></span>Are you sure you want to log out?</p>
</div>
<script>
$(function() {
var username = $("#username"),
password = $("#pw"),
loginFields = $([]).add(username).add(password);
$("#login_link").click(function() {
$("#login_dialog").dialog("open");
});
$("#logout_link").click(function() {
$("#logout_dialog").dialog("open");
});
$("#login_dialog").dialog({
autoOpen: false,
height: 200,
width: 250,
resizeable: false,
modal: true,
buttons: {
Submit: function() {
$.post("auth.php",
{
username: $("#username").val(),
password: $("#pw").val()
},
function(result) {
if(result=='success'){
window.location='Practice.php';
}
else {
$(".error").html(result);
}
}
)
},
Cancel: function(){
$(this).dialog("close");
}
},
close: function() {
loginFields.val("");
}
});
$("#logout_dialog").dialog({
autoOpen: false,
modal: true,
height: 150,
resizeable: false,
buttons: {
Okay: function() {
window.location = "logout.php";
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
</script>
</html>
<?php
function setSessionUserData($cookie) {
$con = connect();
$query = "SELECT * FROM practice_user WHERE userid = '$cookie'";
$result = mysqli_query($con, $query);
$userData = mysqli_fetch_array($result);
$_SESSION["username"] = $userData["username"];
$_SESSION["fname"] = $userData["first_name"];
$_SESSION["lname"] = $userData["last_name"];
}
?>
...和PHP：
if($_SERVER["REQUEST_METHOD"] == "POST") {
$user = test_input($_POST["username"]);
$pass = test_input($_POST["password"]);
//check if correct login
if (chkLogin($user, $pass)) {
$id = getUser($user, $pass);
setUserCookie($id);
header("Location: Practice.php");
}
//check if username exists but incorrect password entered
else if (chkUser($user)) {
echo "Username and password do not match";
}
//Or else return that username doesn't exist
else {
echo "Username does not exist";
}
}
我的代码中还有其他功能来处理验证等。
如果我需要发布这些，请告诉我。
答案 0 :(得分：2)
你能试试吗，
你无法在调用php文件的ajax中重定向页面，所以重定向部分移到了javascript端。
Jquery的，
$("#login_dialog").dialog({
autoOpen: false,
height: 200,
width: 250,
resizeable: false,
modal: true,
buttons: {
Submit: function() {
$.post("auth.php",
{
username: $("#username").val(),
password: $("#pw").val()
},
function(result) {
if(result=='success'){
window.location='Practice.php';
}else{
$(".error").html(result);
}
}
)
},
Cancel: function(){
$(this).dialog("close");
}
},
close: function() {
loginFields.val("");
}
});
创建名为 auth.php 的新页面，包含您的依赖关系php函数。
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$user = test_input($_POST["username"]);
$pass = test_input($_POST["password"]);
//check if correct login
if (chkLogin($user, $pass)) {
$id = getUser($user, $pass);
setUserCookie($id);
echo "success";
}
//check if username exists but incorrect password entered
else if (chkUser($user)) {
echo "Username and password do not match";
}
//Or else return that username doesn't exist
else {
echo "Username does not exist";
}
}
?>
答案 1 :(得分：1)
如果您根本不想进行重定向，并且您认为自己收到错误，因为ajax响应已附加到$('.error')容器。
这可能对您有所帮助
Submit: function() {
$.post("user.php",
{
username: $("#username").val(),
password: $("#pw").val()
},
function(result) {
if(result=='success'){
$("#login_dialog").append(result);
setTimeout(function(){
$("#login_dialog").dialog("close");
},800);
}else{
$('.error').html(result);
}
}
)
},
这会将结果附加到对话框中，并在800毫秒后将其关闭
答案 2 :(得分：0)
经过几次尝试让Krish R的方法工作，通过对单独的php页面代码进行AJAX调用并通过window.location重定向成功，我发现window.location不能单独使用AJAX调用的成功。我最终发现this answer代替使用window.location.assign(data)的类似问题，而且效果很好。
虽然我不明白为什么这种不同的方法是必要的，但它确实解决了重定向问题。谢谢所有回复的人。我正在检查Krish R的答案是否被接受，因为它是最接近解决方案的。