zoukankan      html  css  js  c++  java
  • 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表单,然后将表单中的数据进行异步传输,而不会受到后面这个提交按钮的影响。

  • 相关阅读:
    初识 vue
    Spring boot 整合 Swagger
    Swagger 注解
    初识 Swagger
    初识 mycat
    SpringBoot中的国际化
    为什么博客园用户体验这么差?
    Numpy常用方法及应用总汇
    嵌入式开发10种常见数字滤波算法
    .gitignore使用
  • 原文地址:https://www.cnblogs.com/XZhao/p/6665500.html
Copyright © 2011-2022 走看看