Vue使用axios提交表单数据
生活随笔
收集整理的這篇文章主要介紹了
Vue使用axios提交表单数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼
<html> <head><title>Vue提交表單數據</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style type="text/css">/*boder-collapse 為表格設置合并邊框模型*/table{border-collapse:collapse;border: 1px solid blue}th,td{border:1px solid blue}</style> </head> <body> <div align="center" id="app"> <h1>歡迎來到vue-form表單提交演示間</h1> <table><thead><tr><th>name</th><th>sex</th><th>age</th></tr></thead><tbody><tr v-for="(v,i) in tableData"> <!-- vue嚴格區分大小寫--><td>{{v.name}}</td><td>{{tableData[i].sex}}</td><td><input type="text" v-model="v.age"></td></tr></tbody> </table> <p><button @click="submit">提交</button> <!-- “v-on:”為綁定html事件,簡寫為@ ；官方解釋用于監聽 DOM 事件--> </p> </div> </body> <script>var app= new Vue({el:'#app', //vue掛載的元素節點 可以是css選擇符，HTML元素data:{tableData:[{"name":211,"sex":"男","age":18},{"name":985,"sex":"女","age":18}],form:{first:"first record",last:"last record"}},methods: {submit: function () {function jsonData(arr) {//Json.parse將字符串轉換成json對象//Json.stringify將json對象轉換成json字符串let json = "";function fors(data,attr){data = JSON.parse(JSON.stringify(data));for (let key in data) {if(Array.isArray(data[key]) || Object.prototype.toString.apply(data[key]) =='[object Object]'){fors(data[key], true);} else {if(attr){json = json + '&'+ key + '[]' +'=' + data[key];}else {json = json + '&'+ key +'=' + data[key];}}}return json;}fors(arr);return json} // console.log(jsonData(this.tableData)); //&name[]=211&sex[]=男&age[]=18&name[]=985&sex[]=女&age[]=18//提交用戶數據axios({url:"http://www.easyadmin.com/index.php",method:"post",data:jsonData(this.tableData),//transformRequest允許向服務器發送數據之前修改請求數據 可刪除transformRequest:[function (data) {if(Array.isArray(data) || Object.prototype.toString.apply(data) ==='[object Object]'){let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'}return ret} else {return data;}}],headers:{"Content-Type":"application/x-www-form-urlencoded"}}).then(function (response) {console.log("數據提交成功");console.log(response);}).catch(function (error) {console.log(error);});}}}); </script></html>php代碼：
<?php header("Access-Control-Allow-Origin:*"); $form = file_get_contents('php://input'); //$form = json_decode($form); exit($form);
參考鏈接：https://blog.csdn.net/liguanjie8/article/details/84774737
總結
以上是生活随笔為你收集整理的Vue使用axios提交表单数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP匿名类
- 下一篇： Vue.js-Day01-AM【第一次学