mvc中form表单提交的三种方式(推荐)

 更新时间:2016年08月10日 10:15:44   投稿:mrr  
本文给大家分享mvc中form表单提交的三种方式,分别是submit 按钮 提交方式,$("#dataform").ajaxSubmit() 提交方式,post 提交方式,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧

第一种方式:submit 按钮 提交

<form action="MyDemand" method="post">
<span>关键字:</span>
<input name="keywords" type="text" value="@keywords" />
<input type="submit" value="搜索" />
</form>

第二种方式: $("#dataform").ajaxSubmit() 提交

<form id="dataform" action="UpdateUserInfo" enctype="multipart/form-data" method="post">
<table style="width:100%;border:0;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="40">名字:</td>
<td><input type="text" name="nvc_name" id="nvc_name" value="@Model.nvc_name" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="保存" id="btnsubmit" />
</td>
</tr>
</tbody>
</table>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://malsup.github.io/jquery.form.js"></script> //ajaxForm 依赖脚本
<script type="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 提交

<table style="width:100%;border:0px;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="15%" align="right">手机号:</td>
<td><input type="text"placeholder="请输入手机号" id="nvc_user_name"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="保存" id="btnsubmit" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
$("#btnsubmit").click(function () {
var nvc_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>

以上所述是小编给大家介绍的mvc中form表单提交的三种方式(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js仿小米二级菜单显示效果

    js仿小米二级菜单显示效果

    这篇文章主要为大家详细介绍了js仿小米二级菜单显示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • js实现省级联动(数据结构优化)

    js实现省级联动(数据结构优化)

    这篇文章主要为大家详细介绍了js实现省级联动,数据结构优化,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript 错误捕获与处理的完整指南

    JavaScript 错误捕获与处理的完整指南

    在JavaScript中捕获错误通常有四种方式,try-catch 语句块,Promise 的 catch 方法,throw 语句以及window.onerror事件处理程序,并通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2024-02-02
  • js实现网页右上角滑出会自动消失大幅广告的方法

    js实现网页右上角滑出会自动消失大幅广告的方法

    这篇文章主要介绍了js实现网页右上角滑出会自动消失大幅广告的方法,是javascript广告特效的典型应用,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js实现的Easy Tabs选项卡用法实例

    js实现的Easy Tabs选项卡用法实例

    这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JS扩展方法实例分析

    JS扩展方法实例分析

    这篇文章主要介绍了JS扩展方法,实例分析了javascript扩展方法的原理与各种常用的扩展应用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序常用的3种提示弹窗实现详解

    微信小程序常用的3种提示弹窗实现详解

    这篇文章主要介绍了微信小程序常用的3种提示弹窗实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • ElementUI el-switch 使用示例详解

    ElementUI el-switch 使用示例详解

    在这篇文章中,我们详细介绍了 ElementUI 的 el-switch 组件,从基本用法到高级应用,以及其背后的实现原理,需要的朋友可以参考下
    2024-08-08
  • JavaScript计算字符串中特定字符出现次数的实例详解

    JavaScript计算字符串中特定字符出现次数的实例详解

    在JavaScript编程中,经常会遇到需要计算字符串中特定字符出现次数的情况,在本文中,我将分享两个简单的JavaScript函数,用于计算字符串中特定字符出现的次数,需要的朋友可以参考下
    2023-11-11
  • js判断日期时间有效性的方法

    js判断日期时间有效性的方法

    这篇文章主要介绍了判断js验证日期时间有效性的方法,需要的朋友可以参考下
    2015-10-10

最新评论