vue表單資料互動提交演示
阿新 • • 發佈：2018-12-03
@[TOC]
歡迎來到 vue-form 表單提交演示間, 你有更好的建議，請告知樓主額！
1. 客戶端 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> <!-- axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>歡迎來到 vue-form 表單提交演示間, 你有更好的建議，請告知樓主額！</h1> <table class="table"> <thead> <tr> <th>box</th> <th>new</th> <th>rank</th> <th>desc</th> <th>title</th> </tr> </thead> <tbody> <tr v-for="(v,i) in tabData"> <td>{{v.box}}</td> <td>{{v.new}}</td> <td>{{v.rank}}</td> <td><input type="text" v-model="tabData[i]['desc']"></td> <td>{{v.title}}</td> </tr> </tbody> </table> <p> <button @click="submit" type="primary">提交</button> </p> </div> <script type="application/javascript"> var app = new Vue({ el: '#app', data: { tabData: [ { "box": 21650000, "new": true, "rank": 1, "desc": 'desc1', "title": "Geostorm" }, { "box": 13300000, "new": true, "rank": 2, "desc": 'desc2', "title": "Happy Death Day" } ], form: { firstName: 'Fred', lastName: 'Flintstone' } }, methods: { submit: function () { /** * 多維陣列物件降級為可供 axios 使用的form表單序列化資料 **/ function jsonData(arr) { let json = ""; function fors(data, attr=false) { 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]; } } } } fors(arr); return json; } 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) { // Do whatever you want to transform the 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 (res) { console.log('資料提交成功'); console.log(res.data); }) } } }); </script> <style type="text/css"> table{border-collapse: collapse;border: 1px solid red;} th,td{border: 1px solid red;} </style> </body> </html>
2. 服務端，以PHP為例
<?php header("Access-Control-Allow-Origin:*"); header('Access-Control-Allow-Headers:x-requested-with,content-type'); /** * 接收 x-www-form-urlencoded form表單提交資料 */ echo json_encode($_REQUEST); /** * 1. $GLOBALS ["HTTP_RAW_POST_DATA"]; 需要配置伺服器才可以使用 * 2. file_get_contents('php://input'); 無須配置即可使用 * * 接收 application/json 提交資料 */ $form = file_get_contents('php://input'); $form = json_decode($form); print_r($form);