欢迎来到 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\">
<h1>欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！</h1>
<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表单数据交互提交演示教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容