欢迎来到 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> <h1>欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！</h1> <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表单数据交互提交演示教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: