Vue+Jquery+layerui 页面传递参数-Form提交JSON参数

闲言少叙,上代码

一、列表页面

 

 <table border="1" width="75%" cellpadding="0">

        <tr>

            <td>序号</td>

            <td>名称</td>

            <td>操作</td>

        </tr>

        

        <tr v-for="info in tagList">

           <td>&nbsp;{{info.id}}</td>

           <td>&nbsp;{{info.name}}</td>

<tr><td>

  <button @click="toEditInfo(info.id,info.name)">编辑</button>

  </td></tr>

</table>

<script>
    

var toEditInfo=function(id,name){

                    var url="info_edit.html?id="+id+"&name="+name+"&time"+new Date();

                    url=encodeURI(url);

                    console.log(url);

                    window.location.href=url;

                }

</script>

二、编辑页面

<html>

 

<script>

$(function(){

        // layer.alert("hello,edit page");

        initForm();

       // validateForm();

    });

 var initForm=function(){

        var name=getUrlParam("name");

        var dictId=getUrlParam("id");

        if(name!=null && name!=undefined){

            $("#name").val(name);

        }

        if(dictId!=null && dictId!=undefined){

            $("#dictId").val(dictId);

        }

    }

 

var validateForm=function(){

        $("#myform").validate({

           rules: {

                // 不需要使用 "" 括起来

                name: "required"

                // 需要使用 "" 括起来

                //"user[email]": "email",

                // 需要使用 "" 括起来

                //"user.address.street": "required"

          },

          messages:{

              "name":{

                 "required":"<font color='red'>*</font>名称不能为空",

              },

              "dictId":{

                 "required":"主键Id不能为空",

              }

          },

          submitHandler: function() {

            //验证通过后执行这里

            //alert("提交事件!");

            var jsonTag=form2JsonString($("#myform"));

            console.log(jsonTag);

             //设置请求头

             let config={

                 headers:{

                  'Content-Type':'application/json'  // 'multipart/form-data'

                 }

               };

 

              //封装入参参数

              axios.post('http://localhost:8083/info/edit',jsonTag, config).then(res => {

                var result=res.data.code;

                console.log("result:"+result);

                if(result!=null && result!=undefined && result==0){

                    layer.msg(res.data.msg+'<span name="count" style="color: red;">3</span>秒后跳转列表页', {

                        icon: 1,

                        success: function (layero, index) {

                            var countElem = layero.find('span[name="count"]');

                            var timer = setInterval(function () {

                                var countTemp = parseInt(countElem.text()) - 1;

                                countTemp === 0 ? clearInterval(timer):countElem.text(countTemp);

                            }, 1000)

                        }

                    }, function () {

                        //alert('跳转');

                        window.location.href="list.html"

                    });

                  }else{

                      layer.alert(res.data.msg);

                  }

              }).catch(err => {

                 console.log(err);

              });  

         }

        });

    }

 

/** 表单序列化成json字符串的方法 

 * form object

 */

var form2JsonString=function(formObject) {

    var paramArray = $(formObject).serializeArray();  

     /*请求参数转json对象*/  

     var jsonObj={};  

      $(paramArray).each(function(){  

          jsonObj[this.name]=this.value;  

      });  

     console.log(jsonObj);  

     // json对象再转换成json字符串

     return JSON.stringify(jsonObj);

}

   </script>

</head>

<body>

   <form id="myform" name="myform" >

    <input type="hidden" id="dictId" name="dictId" value=""/><label></label><br/>

    名称:  &nbsp;&nbsp;<input type="text" id="name" name="name" value=""/><label></label><br/>

    叶子节点:是<input type="radio" id="leaf" name="leaf" value="0"/> 

                 否<input type="radio" id="leaf" name="leaf" value="1" /><label></label>

                  <br/>

 

    <input type="submit"  value="提交"/>

   </form>

   </body>

   </html>

说明:The demo in this page is for suggestion.

          本页面仅供参考;如转载,烦请标明出处和链接。如盗用,则保留追究的权利。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值