新增的传递参数方法

最新推荐文章于 2022-10-26 16:10:11 发布

原创最新推荐文章于 2022-10-26 16:10:11 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

学习总结同时被 2 个专栏收录

16 篇文章

订阅专栏

mvc.net

3 篇文章

订阅专栏

本文介绍了在Web开发中，使用jQuery实现表单提交的三种常见方法：序列化传递参数、键值对传递参数和在路径后拼接参数。每种方法都有其适用场景和优缺点，序列化传递适合参数较多的情况，而键值对和拼接参数则适用于参数较少的场合。

视图层代码如下：

注意：为了显示代码，删了部分标签，重要的form标签也看不到（from标签的id为myform）

<meta name="viewport" content="width=device-width" />
<title>form表单的提交方法</title>
<link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<style>
    .container {
        padding-top: 20px;
    }
</style>
</head>
<body>
<div class="container">
   <form class="form-horizontal" id="myform">     
   
            <div class="form-group">
                <label class="control-label col-md-3">姓名：</label>
                <div class="col-md-4">
                    <input class="form-control" type="text" value="" name="txtName" id="txtName" />
                </div>
            </div>
             <div class="form-group">
                <label class="control-label col-md-3">年龄：</label>
                <div class="col-md-4">
                    <input class="form-control" name="Age" id="Age"></input >
                </div>
            </div>
             <div class="form-group">
                <label class="control-label col-md-3">专业：</label>
                <div class="col-md-4">
                    <input class="form-control" name="Specialty" id="Specialty"></input >
                </div>
            </div>
             <div class="form-group">
                <label class="control-label col-md-3">学历：</label>
                <div class="col-md-4">
                    <input class="form-control" name="Education" id="Education"></input >
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">地址：</label>
                <div class="col-md-4">
                    <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
                </div>
            </div>
            <div class="form-group">
              <button class="btn btn-primary col-md-offset-4"  id="btnSubmit">表单提交</button>  第一种 
            </div>
        </form>
</div>
    <script>

第一种：序列化传递参数（相对比较多的参数适合用，但不利于在试图层判断数据是否为空.其实也可以在控制器那边判断）

注：因为form标签默认是用post提交的

$("#btnSubmit").click(function () {
var formDate = $("#myform").serializeArray();
      $.post("/ByCheManagement/QiCheDingHuo/InsertVehicle", formDate, function (data) {
               if (data == "success") {
                   alert("添加成功！"）
               } else {
                 alert("添加失败！");
               }
           })

第二种：键值对传递参数（相对比较少的参数适合用）

 $("#btnSubmit").click(function () {
        var txtName= $('#myform input[name="txtName"]').val(); 
        var Age= $('#myform input[name="Age"]').val(); 
        var Specialty= $('#myform input[name="Specialty"]').val();
        var Education= $('#myform input[name="Education"]').val(); 
        var txtAddress= $('#myform input[name="txtAddress"]').val(); 
        if（txtName!= "" && Age!= "" && Specialty!= "" && Education!= "" && txtAddress!= ""）{
       $.post("/ByCheManagement/QiCheDingHuo/InsertVehicle",{
       txtName:txtName,
       Age:Age,
       Specialty:Specialty,
       Education:Education,
       txtAddress:txtAddress
       } function (data) {
                if (data == "success") {
                    alert("添加成功！"）
                } else {
                  alert("添加失败！");
                }
                }else{
                alert("请填写完整数据，再新增！");
                }
            })

第三种：在路径的后面拼接参数（相对比较少的参数适合用）

$("#btnSubmit").click(function () {
      var txtName= $('#myform input[name="txtName"]').val(); 
      var Age= $('#myform input[name="Age"]').val(); 
      var Specialty= $('#myform input[name="Specialty"]').val();
      var Education= $('#myform input[name="Education"]').val(); 
      var txtAddress= $('#myform input[name="txtAddress"]').val(); 
          if（txtName!= "" && Age!= "" && Specialty!= "" && Education!= "" && txtAddress!= ""）{
     $.post("/ByCheManagement/QiCheDingHuo/InsertVehicle?txtName=" + txtName + "&Age="+Age+ "&Specialty="+Specialty+ "&Specialty="+Specialty+ "&txtAddress="+txtAddress,function (data) {
              if (data == "success") {
                  alert("添加成功！"）
              } else {
                alert("添加失败！");
              }
                }else{
              alert("请填写完整数据，再新增！");
              }
          })