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

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 黑色星期五
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    控件动态产生器(使用RegisterClasses提前进行注册)
    Delphi编写自定义控件以及接口的使用(做了一个TpgDbEdit)
    Log4delphi使用心得
  • 原文地址:https://www.cnblogs.com/XZhao/p/6665500.html
Copyright © 2011-2022 走看看