vue自动提交表单_vue表单数据交互提交演示

@[TOC]

欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！

1. 客户端 html

Title

欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！

boxnewrankdesctitle

{{v.box}}{{v.new}}{{v.rank}}{{v.title}}

提交

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);

})

}

}

});

table{border-collapse: collapse;border: 1px solid red;}

th,td{border: 1px solid red;}

2. 服务端，以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);