歡迎來到 vue-form 表單提交演示間, 你有更好的建議,請告知樓主額!
憑祥網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,憑祥網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為憑祥千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個(gè)售后服務(wù)好的憑祥做網(wǎng)站的公司定做!
1. 客戶端 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發(fā)環(huán)境版本,包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產(chǎn)環(huán)境版本,優(yōu)化了尺寸和速度 --> <!--<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 () { /** * 多維數(shù)組對象降級為可供 axios 使用的form表單序列化數(shù)據(jù) **/ 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('---------------'); // 提交用戶數(shù)據(jù) axios({ url: './index.php', method: 'post', data: jsonData(this.tabData), /** * 1. 如果后臺可接受 application/json 方式提交數(shù)據(jù) 則: * * 不需要 transformRequest 函數(shù)處理請求數(shù)據(jù) * * 不需要 jsonData 函數(shù)對數(shù)據(jù)進(jìn)行降維處理 * 2. PHP 后臺 可通過以下方式解析 application/json 數(shù)據(jù) * * $form = file_get_contents('php://input'); * * $form = json_decode($form); * * 3. 當(dāng)然:**樓主強(qiáng)烈建議**使用 application/json 方式提交數(shù)據(jù)。 * 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('數(shù)據(jù)提交成功'); 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. 服務(wù)端,以PHP為例
<?php header("Access-Control-Allow-Origin:*"); header('Access-Control-Allow-Headers:x-requested-with,content-type'); /** * 接收 x-www-form-urlencoded form表單提交數(shù)據(jù) */ echo json_encode($_REQUEST); /** * 1. $GLOBALS ["HTTP_RAW_POST_DATA"]; 需要配置服務(wù)器才可以使用 * 2. file_get_contents('php://input'); 無須配置即可使用 * * 接收 application/json 提交數(shù)據(jù) */ $form = file_get_contents('php://input'); $form = json_decode($form); print_r($form);
以上這篇vue表單數(shù)據(jù)交互提交演示教程就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前名稱:vue表單數(shù)據(jù)交互提交演示教程
標(biāo)題鏈接:http://muchs.cn/article16/ghjcdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、小程序開發(fā)、云服務(wù)器、網(wǎng)站改版、Google、標(biāo)簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)