微客导航 » 文章资讯 » vue表单数据交互提交演示教程

vue表单数据交互提交演示教程

2023-08-09 11:49:04 146

欢迎来到vue-form表单提交演示间,你有更好的建议，请告知楼主额！

1.客户端html





Title










欢迎来到vue-form表单提交演示间,你有更好的建议，请告知楼主额！



box
new
rank
desc
title




{{v.box}}
{{v.new}}
{{v.rank}}

{{v.title}}




提交

varapp=newVue({ el:'#app', data:{ tabData:[ { "box":21650000, "new":true, "rank":1, "desc":'desc1', "title":"Geostorm" }, { "box":13300000, "new":true, "rank":2, "desc":'desc2', "title":"HappyDeathDay" } ], form:{ firstName:'Fred', lastName:'Flintstone' } }, methods:{ submit:function(){ /** *多维数组对象降级为可供axios使用的form表单序列化数据 **/ functionjsonData(arr){ letjson=""; functionfors(data,attr=false){ data=JSON.parse(JSON.stringify(data)); for(letkeyindata){ if(Array.isArray(data[key])||Object.prototype.toString.apply(data[key])==='[objectObject]'){ fors(data[key],true); }else{ if(attr){ json=json+'&'+key+'[]'+'='+data[key]; }else{ json=json+'&'+key+'='+data[key]; } } } } fors(arr); returnjson; } console.log(jsonData(this.form)); console.log('---------------'); console.log(jsonData(this.tabData)); console.log('---------------'); //提交用户数据 axios({ url:'./index.php', method:'post', data:jsonData(this.tabData), /** *1.如果后台可接受application/json方式提交数据则： **不需要transformRequest函数处理请求数据 **不需要jsonData函数对数据进行降维处理 *2.PHP后台可通过以下方式解析application/json数据 **$form=file_get_contents('php://input'); **$form=json_decode($form); * *3.当然：**楼主强烈建议**使用application/json方式提交数据。 *4.如果大家觉得麻烦可以考虑使用JQ了 */ transformRequest:[function(data){ //Dowhateveryouwanttotransformthedata if(Array.isArray(data)||Object.prototype.toString.apply(data)==='[objectObject]'){ letret=''; for(letitindata){ ret+=encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&' } returnret }else{ returndata; } }], headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }).then(function(res){ console.log('数据提交成功'); console.log(res.data); }) } } }); table{border-collapse:collapse;border:1pxsolidred;} th,td{border:1pxsolidred;}

2.服务端，以PHP为例

以上这篇vue表单数据交互提交演示教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue表单数据交互提交演示教程

欢迎来到vue-form表单提交演示间,你有更好的建议，请告知楼主额！

热门推荐

随机推荐