现在的位置: 首页 > 综合 > 正文

jQuery异步提交form表单

2013年10月04日 ⁄ 综合 ⁄ 共 2446字 ⁄ 字号 评论关闭

jQuery异步提交form表单
 
这个其实挺简单的,只是一开始我想错了,一开始我打算用jQuery + jQuery.form插件来做,其实不必的,只需要jQuery插件就可以了。
首先,在jsp页面中导入jQuery,
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.js"></script>
然后在jQuery的ready方法中定义form提交时的动作就可以了,
$(document).ready(function() {
// 使用 jQuery 异步提交表单
$('#editRealMsgForm').submit(function() {
jQuery.ajax({
url: 'editRealMsg.eri',
data: $('#editRealMsgForm').serialize(),
type: "POST",
beforeSend: function()
{  
$('#submitButton').hide();
$('#editRealMsgImg').show();
},
success: function()
{
$('#editRealMsgImg').hide();
$('#modifyButton').show();
$('#realName').attr("disabled","true");
$('#tel').attr("disabled","true");
}
});
return false;
});
});
现在这个form就绑定好jQuery封装的异步提交 方法了,简单吧!
 
 
 
 
=====================================================
the second method
     no input id
=======================================================
Jquery来对form表单提交(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_r("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_r("(" + 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"]就可以获取表单的值了。

【上篇】
【下篇】

抱歉!评论已关闭.