[英]Return False not working on form
我有一個登錄表單,我試圖通過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響應,但不會觸發成功函數。
在處理程序內但在ajax
之外return false
以防止提交的默認操作。
$("#loginForm").on('submit',function() { //attach handler to form
form_data = {...} //form data
$.ajax({...}); //fire ajax
return false; //prevent default action
});
返回false正在按需要工作,但問題是Success方法是一個回調,只要在ajax調用上有來自服務器端的成功消息,Jquery就會隱式調用它,所以那時你沒有任何句柄從中獲取值,所以要么你需要在另一個方法中定義你的邏輯並在這里調用方法,因為它的回調,你沒有操作的句柄。
是的,如果要返回$.ajax()
調用以返回false,則可以將return false語句移除到success方法范圍之外。
只是一個想法,但將輸入的類型從“提交”更改為“按鈕”。
並且,僅出於調試目的,不要動態分配單擊事件。 將您的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;"
我不建議你保持這種方式,但也許通過這兩個變化,你可以真正追蹤正在發生的事情。
事實證明,一直以來,我只是在我的解決方案中遺漏了一些引號。 我需要更換:
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");
}
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.