Javascript 按Enter键后显示Json数据,而不是单击提交
我有一个MVC视图,通过单击submit按钮,它可以使用Ajax将数据发布到控制器。控制器返回json结果,即消息,我在视图中显示它们。问题是,当我点击Submit按钮时,它工作正常,但当我在再次显示感谢页面后按Enter键时,它将发布到控制器方法,并显示一个包含json数据的页面,如下所示:(我需要使Enter键与按Submit键一样工作) 我的看法是:Javascript 按Enter键后显示Json数据,而不是单击提交,javascript,jquery,json,ajax,asp.net-mvc,Javascript,Jquery,Json,Ajax,Asp.net Mvc,我有一个MVC视图,通过单击submit按钮,它可以使用Ajax将数据发布到控制器。控制器返回json结果,即消息,我在视图中显示它们。问题是,当我点击Submit按钮时,它工作正常,但当我在再次显示感谢页面后按Enter键时,它将发布到控制器方法,并显示一个包含json数据的页面,如下所示:(我需要使Enter键与按Submit键一样工作) 我的看法是: @using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post)
@using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div>
<div>Email Address</div>
<div><input type="email" name="email" placeholder="example@email.com" id="email" class="forgot-password-textbox"></div>
<div><label id="Message" class="forgot-password-error-message"></label></div>
<div><input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button"></div>
</div>
}
我将从按钮中删除click处理程序,并处理相关表单的submit事件 您应该提供一个id,以便更容易确定目标
@using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post, new { id = "reset-form" }))
并简化脚本(因为您使用的是jQuery)以
函数resetPasswordHandler(事件){
var postResult=null,
数据={
电子邮件:$('#Email').val()
},
path=“/forgotPassword”,
errorMessage=$(“#Message”);
event.preventDefault();
$.ajax({
数据类型:“文本”,
url:path,
数据:数据,
类型:“POST”,
cache:false,
成功:功能(结果){
postResult=$.parseJSON(结果);
如果(postResult.status==“成功”){
$(“#忘记了”).hide();
$(“#忘了谢谢”).show();
返回;
}否则{
errorMessage.html(postreult.message);
}
},
错误:函数(){
html(“发生了错误”);
}
});
返回false;
};
$(“#重置表单”)。在('submit',resetPasswordHandler)上
删除您onclick=“resetPasswordHandler()”
并使用$('form').submit(函数(){…resetPasswordHandler方法中的代码在此…})代码>(使用)。并删除窗口。onkeydown
脚本
[HttpPost]
[Route("forgotPassword")]
public async Task<JsonResult> ForgotPassword(ForgotPasswordRequest forgotPasswordRequest)
{
...
try
{
if (ModelState.IsValid)
{
if (!string.IsNullOrEmpty(forgotPasswordRequest.Email))
{
users = await authenticationService.GetUserByEmailAsync(forgotPasswordRequest.Email);
if (users.Any())
{
if(users.FirstOrDefault().StatusId == 2)
{
return Json(new { status = "error", message = Constants.MessageStrings.ForgotPasswordDisabledUser });
}
//New User without creating password
if (string.IsNullOrEmpty(users.FirstOrDefault().PasswordHash))
{
return Json(new { status = "error", message = Constants.MessageStrings.ForgotPasswordDisabledUser });
}
....
}
}
else
{
ModelState.AddModelError("", Constants.MessageStrings.NoUser);
return Json(new { status = "error", message = Constants.MessageStrings.NoUser });
}
}
}
else
{
.......
return Json(new { status = "error", message = Constants.MessageStrings.RequiredFields });
}
function resetPasswordHandler() {
var postResult = null;
var data = {
Email: document.getElementById('email').value
};
var path = "/forgotPassword";
var errorMessage = document.getElementById('Message');
$.ajax({
dataType: "text",
url: path,
data: data,
type: "POST",
cache: false,
success: function (result) {
postResult = $.parseJSON(result);
if (postResult.status == "success") {
$('#forgot').hide();
$('#forgot-thank-you').show();
return false;
}
else {
errorMessage.innerHTML = postResult.message;
}
},
error: function () {
errorMessage.innerHTML = "An error occured";
}
});
return false;
};
window.onkeydown = function () {
if (window.event.keyCode == '13') {
resetPasswordHandler();
}
}
@using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post, new { id = "reset-form" }))
return Json(new { status="success",message="what ever your msg"}, JsonRequestBehavior.AllowGet);