溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
歡迎來到 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"> <h2>歡迎來到 vue-form 表單提交演示間, 你有更好的建議，請告知樓主額！</h2> <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);
以上這篇vue表單數據交互提交演示教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
