我对 MVC 中的 json ajax 调用有疑问。我创建了一个登录表单,在那个用户名、密码和登录按钮中
并添加了一个用于登录的 js 文件和一个 httpPost 类型的控制器。我的问题是当我单击登录按钮时,它会转到登录 js 文件单击事件并执行对控制器的 ajax 调用,控制器将 JSON 结果返回为成功,但在 ajax 响应中,页面刷新并执行登录索引action 方法和另一个奇怪的事情是,如果我再次单击登录,则 ajax 调用响应正确地作为 JSON(data.success)
谁能帮我整理一下!。
脚本(通过按钮点击事件执行):
function login() {
var errorLabel = $("#error");
var email = $("#email").val();
var password = $("#password").val();
var rememberMe = $("#rememberMe:checked").length > 0;
displayLoadingSpinner(true);
displayLoginButton(false);
if (email === "" || password === "") {
errorLabel.text("Please fill all fields");
errorLabel.show();
displayLoadingSpinner(false);
displayLoginButton(true);
} else {
$.ajax({
type: "POST",
cache: false,
url: "/Login/Login",
data: { "username": email, "password": password, "rememberMe":
rememberMe },
success: function(data) {
if (data.Success === true) {
if (data.IsExistingUserRecurringPayment === true) {
window.location = "/dashboard";
} else {
if (data.Message === "") {
errorLabel.text("Incorrect Username or Password");
} else {
errorLabel.text(data.Message);
displayLoadingSpinner(false);
displayLoginButton(true);
}
errorLabel.show();
}
},
error: function() {
errorLabel.text("Unable to validate given credentials");
errorLabel.show();
displayLoadingSpinner(false);
displayLoginButton(true);
}
});
}
}
控制器:
[HttpPost]
public JsonResult Login(string username, string password, bool rememberMe = false)
{
AssertHelper.AssertNotNull(username, "username");
AssertHelper.AssertNotNull(password, "password");
try
{
var result = _authenticationService.Login(username, password, rememberMe);
if (result.Success)
{
Session["CurrentUser"] = CurrentUser;
return Json(new { Success = true }, "application/json", JsonRequestBehavior.AllowGet);
}
else
{
var errorMessage = string.IsNullOrEmpty(result.Message)
? "Incorrect Username or Password"
: result.Message;
return Json(new { Success = false, Message = errorMessage }, "application/json", JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
Elmah.ErrorSignal.FromCurrentContext().Raise(ex);
return Json(new { Success = false, Message = ex.Message }, "application/json", JsonRequestBehavior.AllowGet);
}
}
在视图中:
<form class="form_fields" onsubmit="return false;">
<div class="form-group">
<input type="text" class="form-control" id="txtUserName" placeholder="UserName">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<p style="color: red; display: none" id="error"></p>
<button type="submit" class="btn_full btn_blue" id="btnLogin">Log in</button>
<div class="lds-ripple" style="display:none;"><div></div><div></div></div>
<div class="spinner" style="display: none;">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</form>
看起来问题可能是按下的按钮同时触发了您的 java 脚本“login()”函数和表单的“提交”事件(这就是导致刷新的原因)。这里有两种方法可以防止刷新:
尝试通过将按钮类型从“提交”更改为“按钮”来更改按钮 html,以便它不会导致提交事件
或者
侦听提交事件并防止默认行为,例如e.preventDefault()
. 如何做到这一点在这里解释得很好
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句