mvc form表单提交的几种形式整理总结
mvc中form表单提交的几种形式
第一种方式：submit按钮提交
<formaction="MyDemand"method="post"> <span>关键字：</span> <inputname="keywords"type="text"value="@keywords"/> <inputtype="submit"value="搜索"/> </form>
第二种方式：$("#dataform").ajaxSubmit()提交
<formid="dataform"action="UpdateUserInfo"enctype="multipart/form-data"method="post"> <tablestyle="width:100%;border:0;"cellpadding="0"cellspacing="0"> <tbody> <tr> <tdwidth="40">名字：</td> <td><inputtype="text"name="nvc_name"id="nvc_name"value="@Model.nvc_name"/></td> </tr> <tr> <tdcolspan="2"align="center"> <inputtype="button"value="保存"id="btnsubmit"/> </td> </tr> </tbody> </table> </form>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<scriptsrc="http://malsup.github.io/jquery.form.js"></script>//ajaxForm依赖脚本
<scripttype="text/javascript">
$(document).ready(function(){
$("#btnsubmit").click(function(){if($("[name='nvc_name']").val()==""){
alert("请填写名字");
$("[name='nvc_name']").focus();
return;
}
$("#dataform").ajaxSubmit(function(r){
alert(r.Msg);
if(r.success){
location.reload();
}
})
})
});
</script>
第三种方式：post提交
<tablestyle="width:100%;border:0px;"cellpadding="0"cellspacing="0"> <tbody> <tr> <tdwidth="15%"align="right">手机号：</td> <td><inputtype="text"placeholder="请输入手机号"id="nvc_user_name"/></td> </tr> <tr> <tdcolspan="2"align="center"> <inputtype="button"value="保存"id="btnsubmit"/> </td> </tr> </tbody> </table>
<scripttype="text/javascript">
$(function(){
$("#btnsubmit").click(function(){
varnvc_user_name=document.getElementById('nvc_user_name');
$.post('/Interface/ModefiyPwd',{
nvc_user_name:nvc_user_name.value,
},function(data){
if(data.success){
$("#successdiv").show();
$("#editdiv").hide();
}
else{
layer.msg(data.Msg);
}
});
});
})
</script>
第四种方式：为from中的button添加onclick事件验证表单后提交
<formmethod="post"action="RecordEdit"id="dataForm"> <tablewidth="100%"border="0"cellspacing="0"cellpadding="0"> <tr> <tdalign="right">应用路径：</td> <td> <inputtype="text"name="nvc_app_path"id="nvc_app_path"> </td> </tr> <trclass="b_tr2"> <td><inputtype="button"onclick="CheckForm();"value="保存"></td> </tr> </table> </form>
<scriptsrc="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<scriptsrc="~/Scripts/layer/layer.js"></script>
<scripttype="text/javascript">
functionCheckForm()
{
if($("#nvc_app_path").val().length==0){
layer.tips("应用路径不能为空","#nvc_app_path");
return;
}
$("#dataForm").submit();
}
</script>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！