Jquery来对form表单提交(mvc方案)

来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html

我先说明一下,这是asp.net mvc 里面的用法,

Jquery来对form表单提交,下面是一个form表单,里面没有action字段,我们来用Jquery注册事件进行提交,

<form method="post" id="documentForm">
    <input type="hidden" id="hidId" name="hidId" value="<%=Request.QueryString["id"] %>" />
    <input type="hidden" id="hidAction" name="hidAction" value="<%=Request.QueryString["action"] %>" />
    <div class="fieldbody">         
        <div class="tagsiglebody">
            <table class="create">
                <tr>
                    <th class="w100">
                        关键字:
                    </th>
                    <td class="nes">
                        <input type="text" id="txtKeyword" name="txtKeyword" class="txt w250" value="<%= ViewData.Eval("keywords") %>"
                            isnull="0" />
                        关键字请用逗号隔开
                    </td>
                </tr>                
            </table>
        </div>
    </div>
    <div class="btngroup">
        <input type="button" class="btncreateok" id="btnConfirm" value="创建" />
        <input type="button" class="btncreatecancel" onclick="history.go(-1)" value="取消" />
    </div>
    </form>

在js中的代码如下:

$(document).ready(function () {
    $("#btnConfirm").click(function () {
        $(‘#documentForm‘).submitForm({
            url: "/Document/SubmitDocumentCreate",
            dataType: "text",
            callback: function (data) {
                endFileUpload();
                data = eval("(" + data + ")");
                alert(data.Content);
                if (data.Result > 0) {
                    location.href = data.Redirect;
                }
            },
            before: function () {
                startFileUpload();
                var errMsg = "";
            }
        }).submit();
    });

}

在js中,我们一定要注意,$(document).ready是必须的,不然会出错,其中对button、form的id进行事件绑定:$("#btnConfirm").click、$(‘#documentForm‘).submitForm

然后在$(‘#documentForm‘).submitForm方法中给出url和回调方法。

好了,这下就完成了,当然那怎么在Document/SubmitDocumentCreate中获取表单的值呢,用Request.Form["xxxxx"]就可以获取表单的值了。

时间: 2024-10-09 22:59:24

Jquery来对form表单提交(mvc方案)的相关文章

spring mvc Controller与jquery Form表单提交代码demo

1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +":"+ request.getServerPort() + request.getContextPath() + "/"; %> <script language="javascript" type="text/javascript

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post(

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记 1.  模拟form表单提交数据:(get方式) <body> <formmethod="get"action="DataTest7"> <inputtype="text"name="uname"value="yang"id="myname"><br/> <inputtype="password&q

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

javascprit form表单提交前验证以及ajax返回json

1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后返回 returning 405 Method Not Allowed 原因是我后台返回的时候没有加上: @ResponseBody注解.加上后返回的数据是json字符串,但是js只能操作json对象.需要把json字符串转为json对象.一般的有三种方式1.JSON.parse();如 var j

form表单提交方式

无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targetIfr"> <input type="text" name="name"/&g

ajax传递数组、form表单提交对象数组

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结.今天又遇到需要向后台传递数组,便一并写下来吧. 1.ajax传递普通数组 前台代码 var deleteNum= [];//定义要传递的数组 deleteNum.push("1"); deleteNum.push(&qu

form表单提交转为ajax方式提交

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法. 原先的form表单长这样: <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <