MVC之AJAX异步提交表单
Posted 善良的小赵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MVC之AJAX异步提交表单相关的知识，希望对你有一定的参考价值。
第一种用法：
在MVC中，依然可以使用ajax校验，跟在WebForm中的使用时一样的，唯一的区别就是将以前的URL路劲改为访问控制器下的行为
前台 <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $.post("/Home/ShowUserName", {}, function (data) { var data = $.parseJSON(data); for (var i = 0; i < data.length; i++) { $("#div").append(data[i]); } }) }) }); </script> </head> <body> <div> <input type="button" id="btn" value="加载"/> <div id="div"></div> </div> </body> </html> 后台 public ActionResult ShowUserName() { IQueryable<string> teacherNameList= dbContext.Teacher.Select(u => u.TeacherName); JavaScriptSerializer js = new JavaScriptSerializer(); string nameList= js.Serialize(teacherNameList); return Content(nameList); }
其实对于MVC中已经对json做了更好的封装，就后台代码而言，可以返回JsonResult，所以可以省掉自己手写JavaScriptSerializer类
第二种用法：
MVC中已经对ajax校验进行了很好的封装，可以使用相关的类库直接点出来。
Ajax.BeginForm(...)
首先因为即使微软的MVC进行封装了，它依然依赖于ajax，所以需要添加相应的j文件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function Hello(data)
{
alert("hello"+data);
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("Index1", "ajax", new AjaxOptions() { Confirm = "确定要删除吗", HttpMethod = "post", OnSuccess = "Hello" }))
{
<input type="submit" value="提交" />
}
</div>
</body>
</html>
上面的代码实现了异步提交的操作，当然Ajax.BeginForm有很多的重载，可以实现基本所有的手写的功能，同时发现其中的提交按钮的类型是submit类型，但是依然是走的异步调用的流程，具体的原因是，隐式JS文件中，首先会找到这个打了标记的Form表单，然后将表单中的数据进行异步传输，而不会受到后面这个提交按钮的影响。
以上是关于MVC之AJAX异步提交表单的主要内容，如果未能解决你的问题，请参考以下文章
mvc Html.BeginForm和Ajax.BeginFrom表单提交
MVC小系列Html.BeginForm与Ajax.BeginForm