这里有新鲜出炉的精品教程,程序狗速度看过来!
这篇文章主要介绍了 mvc form 表单提交的几种形式整理总结的相关资料, 这里提供了几种方法及实例代码,需要的朋友可以参考下
mvc 中 form 表单提交的几种形式
第一种方式: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>
第四种方式:为 from 中的 button 添加 onclick 事件 验证表单 后提交
- <form method="post" action="RecordEdit" id="dataForm">
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td align="right">应用路径:</td>
- <td>
- <input type="text" name="nvc_app_path" id="nvc_app_path" >
- </td>
- </tr>
- <tr class="b_tr2">
- <td><input type="button"onclick="CheckForm();" value="保存"></td>
- </tr>
- </table>
- </form>
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js">
- </script>
- <script src="~/Scripts/layer/layer.js">
- </script>
- <script type="text/javascript">
- function CheckForm() {
- if ($("#nvc_app_path").val().length == 0) {
- layer.tips("应用路径不能为空", "#nvc_app_path");
- return;
- }
- $("#dataForm").submit();
- }
- </script>
来源: http://www.phperz.com/article/17/0820/338163.html