vue表单数据交互提交演示教程
作者:liguanjie8 时间:2024-04-10 13:48:08
欢迎来到 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);
来源:https://blog.csdn.net/liguanjie8/article/details/84774737
标签:vue,表单,数据交互,提交
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2022-06-06 12:32:10
![](https://img.aspxhome.com/file/2023/7/70697_0s.jpg)
Pandas.DataFrame重置列的行名实现(set_index)
2021-08-07 16:56:25
php以post形式发送xml的方法
2023-11-22 12:40:47
Python计算两个日期相差天数的方法示例
2023-05-17 13:59:21
识别操作系统是不是vista的js代码
2013-10-20 19:08:25
SQL Server数据库导入MySQL数据库体验
2009-01-20 16:07:00
Python实现单例模式的五种写法总结
2022-09-07 08:34:11
Python 连接字符串(join %)
2021-01-13 23:30:46
在python中实现调用可执行文件.exe的3种方法
2022-08-10 06:40:42
python dict 相同key 合并value的实例
2021-06-17 09:07:43
Vscode 基础使用教程大全
2023-03-06 01:58:18
![](https://img.aspxhome.com/file/2023/7/132417_0s.png)
Python语言基础之函数语法
2021-11-06 23:18:44
matplotlib共享坐标轴的实现(X或Y坐标轴)
2023-12-01 23:58:12
![](https://img.aspxhome.com/file/2023/5/83805_0s.png)
SQL Server如何插入数据示例代码
2024-01-13 16:42:33
![](https://img.aspxhome.com/file/2023/0/116290_0s.png)
把JS与CSS写在同一个文件里
2007-12-16 15:29:00
MyBatis SQL xml处理小于号与大于号正确的格式
2024-01-20 03:32:57
解决Pycharm中import时无法识别自己写的程序方法
2023-05-09 22:47:37
keras使用Sequence类调用大规模数据集进行训练的实现
2021-01-03 20:24:35
python实现猜数游戏(保存游戏记录)
2022-08-31 09:39:54
js实现关闭网页出现是否离开提示
2024-05-09 10:36:13
![](https://img.aspxhome.com/file/2023/1/126831_0s.jpg)