首页 > 代码库 > MVC之AJAX异步提交表单

MVC之AJAX异步提交表单

2024-09-12 11:28:51   220人阅读

第一种用法：

在MVC中，依然可以使用ajax校验，跟在WebForm中的使用时一样的，唯一的区别就是将以前的URL路劲改为访问控制器下的行为

前台
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="http://www.mamicode.com/~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.post("/Home/ShowUserName", {}, function (data) {
                    var data = http://www.mamicode.com/$.parseJSON(data);"#div").append(data[i]);
                    }
                })
            })
        });
    </script>
</head>
<body>
    <div>
       <input type="button" id="btn" value="http://www.mamicode.com/加载"/>
        <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="http://www.mamicode.com/~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="http://www.mamicode.com/~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="http://www.mamicode.com/~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="http://www.mamicode.com/~/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="http://www.mamicode.com/提交" />
        } 
    
    </div>
</body>
</html>

上面的代码实现了异步提交的操作，当然Ajax.BeginForm有很多的重载，可以实现基本所有的手写的功能，同时发现其中的提交按钮的类型是submit类型，但是依然是走的异步调用的流程，具体的原因是，隐式JS文件中，首先会找到这个打了标记的Form表单，然后将表单中的数据进行异步传输，而不会受到后面这个提交按钮的影响。

MVC之AJAX异步提交表单


联系
我们