首页 > 代码库 > MVC学习系列-表单的异步提交

MVC学习系列-表单的异步提交

2024-11-26 03:04:39   203人阅读

MVC中表单的提交有两种方式：jQuery方式、微软异步方式

下面分别就两种方法进行介绍：

1.jQuery方式

<pre name="code" class="html">        <script type="text/javascript">
            $(function () {
                $("#loadingId").css("display","none");
                $("#btnShow").click(function () {
                    $.get("Login/GetTime", {}, function (msg) {
                        alert(msg);
                    })
                })
            })
        </script>

上面演示的是异步方式中的get()异步，第一个参数指定url，第二个参数是传递的值，由于是get请求，没有数据的传递，第三个参数是get()请求执行成功过以后执行的函数（后台会返回数据msg）,比较简单。同样还可以使用Post()
        <script type="text/javascript">
            $(function () {
                $("#loadingId").css("display","none");
                $("#btnShow").click(function () {
                    $.post("Login/GetTime", {"value"："1"}, function (msg) {
                        alert(msg);
                    })
                })
            })
        </script>
同样还可以使用ajax方式，在此不累述

2.微软异步方式
        <% using (Ajax.BeginForm("GetTime","Login",new AjaxOptions()
               {
                   Confirm = "您确定要提交吗？",
                   HttpMethod = "Get",
                   UpdateTargetId = "result",//更新目标的Id，后台返回数据之后，数据交给哪个dom元素来展示
                   InsertionMode = InsertionMode.InsertAfter,
                   //OnSuccess = "afterGetDate",//设置成功之后的一个执行的方法
                   LoadingElementId = "loadingId"//设置一个加载后台数据的时候，显示一个dom元素的id
               }))
           { %>
            <input type="text" name="txtName"/>
            <input type="submit" value=http://www.mamicode.com/"提交"/>>
要使用微软的异步方法还必须引异步包进来
<script src=http://www.mamicode.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
微软的异步方式以Ajax.BeginForm() 开头，里面包含了几个参数。第一个参数是异步提交的Action；第二个是异步提交的控制器名字，两者共同组成了一个url；第三个是一些异步选项。
Confirm是用来在用户提交前弹出一个对话框
HttpMethod：异步提交数据的方式
<pre name="code" class="html">UpdateTargetId：更新<span style="font-family: Arial, Helvetica, sans-serif;">更新目标的Id，后台返回数据之后，数据交给哪个dom元素来展示</span>
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">InsertionMode：插入结点的方式。是一个枚举类型，有Replace、<span style="font-family: Arial, Helvetica, sans-serif;">InsertBefore 、</span><span style="font-family: Arial, Helvetica, sans-serif;">InsertAfter选项</span>
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">OnSuccess：设置成功之后的一个执行的方法
<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">LoadingElementId：设置一个加载后台数据的时候，显示一个dom元素的id。我们可以通过这个给用户显示操作进度</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
当我们点击运行时，微软异步方式代码发生了转变，转变成了下面的格式：
<form action="/Login/GetTime" data-ajax="true" data-ajax-confirm="您确定要提交吗？" data-ajax-loading="#loadingId" data-ajax-method="Get" data-ajax-mode="after" data-ajax-update="#result" id="form0" method="post">
            <input type="text" name="txtName">
            <input type="submit" value=http://www.mamicode.com/"提交">>
上面代码的转换就是通过我们上面引进的微软的异步包实现的。当然我们也完全可以不使用微软提供的异步提交数据的方式，直接使用上面的转换过的form表单的格式，一样可以实现异步提交数据的效果。
MVC学习系列-表单的异步提交






























        

            
                
                  
                
                

                    联系

                    我们