vue表单数据交互提交演示教程

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表单数据交互提交演示教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。