问题描述
我有一个处理使用视图模型的表单的工作控制器。我能够对 razor 或 View 页面进行编程以使用 JQuery Ajax 来提交表单,但是,看起来页面正在刷新或正在发生提交。在处理步骤之后,返回值显示在一个白色干净的浏览器页面上,忽略来自 Ajax 处理器的 Success 函数。如何让 Ajax 成功代码返回并正确处理,以便向用户显示适当的消息。
function SubmitForm() {
$.ajax({
type: "POST",url: $("#myForm").attr("action"),success: function(msg) {
$("#Response").html(msg);
},error: function(req,status,error) {
alert(error);
}
});
}
<div class="col-lg-8 mt-5 mt-lg-0">
<form id="myForm" asp-controller="Contact" asp-action="Index">
<div class="row">
<div class="col-md-3 form-group">
<label asp-for="FirstName" class="u-label"></label>
<input type="text" asp-for="FirstName" class="form-control" placeholder="Your Name" required>
<span style="color:darkgoldenrod;" asp-validation-for="FirstName"></span>
</div>
<div class="col-md-3 form-group">
<label asp-for="LastName" class="u-label"></label>
<input type="text" asp-for="LastName" class="form-control" placeholder="Your Name" required>
<span style="color:darkgoldenrod;" asp-validation-for="LastName"></span>
</div>
<div class="col-md-6 form-group">
<label asp-for="Email" class="u-label"></label>
<input type="email" placeholder="Email" asp-for="Email" class="form-control" required>
<span style="color:darkgoldenrod;" asp-validation-for="Email"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Subject" class="u-form-control-hidden u-label"></label>
<input type="text" placeholder="Subject" asp-for="Subject" class="form-control" required>
<span style="color:darkgoldenrod;" asp-validation-for="Subject"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Message" class="u-form-control-hidden u-label"></label>
<textarea placeholder="Message" rows="5" cols="50" asp-for="Message" class="form-control" required=""></textarea>
<span style="color:darkgoldenrod;" asp-validation-for="Message"></span>
</div>
</div>
<br />
<div class="row">
<div class="col" style="padding:10px!important;">
<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>
</div>
</div>
</form>
<hr />
<span id="Response"></span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
解决方法
检查这是否有效以了解preventDefault
的更多详细信息,请查看
https://www.w3schools.com/jsref/event_preventdefault.asp
function SubmitForm(e) {
e.preventDefault(); //prevent default event functionality
$.ajax({
type: "POST",url: $("#myForm").attr("action"),success: function(msg) {
$("#Response").html(msg);
},error: function(req,status,error) {
alert(error);
}
});
}
,
这是一个工作演示:
改变
<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>
到
<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>
ajax($("#myForm").serialize
可以帮助将表单数据发布到操作中):
function SubmitForm() {
$.ajax({
type: "POST",url: $("#myForm").attr("action"),data: $("#myForm").serialize(),success: function (msg) {
$("#Response").html(msg);
},error: function (req,error) {
alert(error);
}
});
}
动作:
public string Index(ModelA m)
{
return "success";
}