我有一个登录表单，我试图通过AJAX提交。我有一个类似的注册表格，工作完美;但是，返回虚假陈述并不会被解雇。
我的登录表单如下：
<form name="loginForm" id="loginForm" action="userSystem/userSystem.php" method="post">
<div class="loginTable">
<div class="loginRow">
<div class="loginCell"><label for="username">Username:</label></div>
<div class="loginCell"><input type="text" name=="username" id="loginFormUser"></div>
</div>
<div class="loginRow">
<div class="loginCell"><label for="password">Password:</label></div>
<div class="loginCell"><input type="password" name="password" id="loginFormPass"></div>
</div>
<div class="loginRow">
<div class="loginCell"> </div>
<div class="loginCell"><input type="submit" name="submit" value="Log In" id="loginFormSubmit"></div>
</div>
</div>
</form>
</section>
<section id="loginBarRegForm">
<h1>Step Two</h1>
<form name="regForm" id="regForm" action="usersystem/register.php" method="post">
<div class="loginTable">
<div class="loginRow">
<div class="loginCell"><label for="r_username">Username:</label></div>
<div class="loginCell"><input type="text" name="r_username" id="r_username"></div>
<div class="loginCell"><span id="r_usernameFeedback"></span></div>
</div>
<div class="loginRow">
<div class="loginCell"><label for="r_password">Password:</label></div>
<div class="loginCell"><input type="password" name="r_password" id="r_password"></div>
<div class="loginCell"><span id="r_passwordFeedback"></span></div>
</div>
<div class="loginRow">
<div class="loginCell"><label for"r_vpassword">Verify Password</label></div>
<div class="loginCell"><input type="password" name="r_vpassword" id="r_vpassword"></div>
<div class="loginCell"><span id="r_vpasswordFeedback"></span></div>
</div>
<div class="loginRow">
<div class="loginCell"><label for="email">Email:</label></div>
<div class="loginCell"><input type="text" name="r_email" id="r_email"></div>
<div class="loginCell"><span id="r_emailFeedback"></span></div>
</div>
<div class="loginRow">
<div class="loginCell"></div>
<div class="loginCell"><input type="submit" name="r_submit" value="Register" id="r_submit"></div>
<div class="loginCell"></div>
</div>
</div>
</form>
我点击
时点击提交按钮时尝试执行的javascript$("#loginFormSubmit").click(function() {
form_data = {
username: $("#loginFormUser").val(),
password: $("#loginFormPass").val(),
operation: "login",
is_ajax: 1
}
$.ajax({
type: "POST",
url: "userSystem/userSystem.php",
data: form_data,
dataType: json,
success: function(data) {
if(data.success) {
$("#loginBarLoginForm").fadeOut("slow");
$("#userDetailsUsername").html(data.username);
$("#userDetailsEmail").html(data.email);
$("#userDetails").fadeIn('slow');
} else {
$("#loginbarLoginForm").fadeOut("slow");
$("#loginBoxResponseDiv").html(data.message);
$("#loginBoxResponseFrame").fadeIn("slow");
}
}
});
return false;
});
到目前为止，这是关于我已经开发的最深入的应用程序，但是为什么返回false将在一个实例中工作，而不是另一个实例，这是没有意义的。它们几乎完全相同，除了数据。
感谢您提供的任何帮助：）
编辑：更新了代码。
$("#loginFormSubmit").click(function() {
console.log("Click Event Firing");
var form_data = {
username: $("#loginFormUser").val(),
password: $("#loginFormPass").val(),
operation: "login",
is_ajax: 1
};
console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);
$.ajax({
type: "POST",
url: "userSystem/userSystem.php",
data: form_data,
success: function(data) {
console.log("Ajax Working");
if(data.success === true) {
$("#loginBarLoginForm").hide();
$("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
$("#loginBoxResponseFrame").fadeIn("slow");
} else {
$("#loginBarRegForm").hide();
$("#loginBoxResponseDiv").html(data.message);
$("#loginBoxResponseFrame").fadeIn("slow");
}
}
});
});
代码现在将返回JSON响应，但不会触发成功函数。
答案 0 :(得分：3)
return false但在ajax之外，以防止提交的默认操作。
$("#loginForm").on('submit',function() { //attach handler to form
form_data = {...} //form data
$.ajax({...}); //fire ajax
return false; //prevent default action
});
答案 1 :(得分：0)
返回false正在按需要工作，但问题是Success方法是一个回调，只要在ajax调用上有来自服务器端的成功消息，Jquery就会隐式调用它，所以那时候，你不要有任何句柄来从中获取值，所以要么你需要在另一个方法中定义你的逻辑并在这里调用方法，因为它的回调，你没有操作的句柄。
并且如果您想要返回$.ajax()调用以返回false，则可以将return false语句移除到success方法范围之外。
答案 2 :(得分：0)
只是一个想法，但将输入的类型从“提交”更改为“按钮”。
并且，仅出于调试目的，不要动态分配单击事件。将您的JS更改为：
function NamedFunction() {
form_data = {
username: $("#loginFormUser").val(),
password: $("#loginFormPass").val(),
operation: "login",
is_ajax: 1
}
$.ajax({
type: "POST",
url: "userSystem/userSystem.php",
data: form_data,
dataType: json,
success: function(data) {
if(data.success) {
$("#loginBarLoginForm").fadeOut("slow");
$("#userDetailsUsername").html(data.username);
$("#userDetailsEmail").html(data.email);
$("#userDetails").fadeIn('slow');
} else {
$("#loginbarLoginForm").fadeOut("slow");
$("#loginBoxResponseDiv").html(data.message);
$("#loginBoxResponseFrame").fadeIn("slow");
}
}
});
return false;
}
然后将其添加到您的提交按钮
onclick="NamedFunction(); return false;"
我不建议你保持这种方式，但也许通过这两项改变，你可以真正追踪发生的事情。
答案 3 :(得分：0)
事实证明，在我的解决方案中，我只是错过了一些引用。我需要更换：
dataType: json,
使用：
dataType: "json",
一旦我得到了，解决方案就到位了，现在我的用户将能够在没有页面刷新的情况下登录。我还有很长的路要走这个项目，但是谢谢大家的帮助，指出我正确的方向。我也觉得我能够自己找到答案了。但是，如果没有我从SO社区获得的精彩帮助和提示，我永远不会有。你们是百万分之一！
最终解决方案最终看起来像这样：
$("#loginFormSubmit").click(function() {
console.log("Click Event Firing");
var form_data = {
username: $("#loginFormUser").val(),
password: $("#loginFormPass").val(),
operation: "login",
is_ajax: 1
};
console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);
$.ajax({
type: "POST",
url: "userSystem/userSystem.php",
dataType: "json",
data: form_data,
success: function(data) {
console.log("Ajax Working");
console.log("data.success: " + data.success);
console.log("data.username: " + data.username);
if(data.success === true) {
console.log("data.success was true");
$("#loginBarLoginForm").hide();
$("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
$("#loginBoxResponseFrame").fadeIn("slow");
$("#notLoggedIn").fadeOut("slow");
$("#currentlyLoggedIn").fadeIn("slow");
$.cookie("username", data.username, {expires: 7, path: "/"});
$.cookie("id", data.id, {expires: 7, path: "/"});
$.cookie("email", data.email, {expires: 7, path: "/"});
$.cookie("user_level", data.user_level, {expires: 7, path: "/"});
$.cookie("active", data.active, {expires: 7, path: "/"});
$.cookie("reg_date", data.reg_date, {expires: 7, path: "/"});
$.cookie("last_login", data.last_login, {expires: 7, path: "/"});
$("#cookieUsername").html($.cookie("username"));
$("#cookieID").html($.cookie("id"));
$("#cookieEmail").html($.cookie("email"));
$("#cookieUserLevel").html($.cookie("user_level"));
$("#cookieActive").html($.cookie("active"));
$("#cookieRegDate").html($.cookie("reg_date"));
$("#cookieLastLogin").html($.cookie("last_login"));
} else {
console.log("data.success was false");
$("#loginBarRegForm").hide();
$("#loginBoxResponseDiv").html(data.message);
$("#loginBoxResponseFrame").fadeIn("slow");
}
}
});
});