vue表单数据交互提交演示

@[TOC]

欢迎来到 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 dataif(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://my.oschina.net/u/3857316/blog/2967019

vue表单数据交互提交演示相关推荐

vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...
Struts2_4_ActionMap与ValueStack详解_Struct2的EL及常用标签_防止表单数据重复提交
接着Struts2_3_day的讲注:使用Struts2的< s:debug>< /s:debug>就可获取数据储存的分布图 StrutsPrepareAndExecuteF ...
html post请求渲染,FastAPI框架入门基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
【表单】表单数据的提交和处理
1.什么是表单 (转自:https://blog.csdn.net/ixygj197875/article/details/79904298) HTML 表单的主要作用是接收用户的输入,当用户提交表单 ...
form表单数据的提交与获取
最近写项目遇到的情况,搜索查看以后总结了一下关于form表单的提交与数据获取的方式. form表单的提交方式: 1.type=submit提交 input type="submit" ...
vue自动提交表单_(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)...
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...
Vue表单数据自动收集---vue工作笔记0012
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 然后我们再看vue去实现表单信息自动收集先看看表单相关的几个组件,可以看到 text,radio ...
Vue表单数据修改与删除
学习来源:视频p6 书接上文目录数据修改功能修改对话框视频教程的做法后端提供接口前端调用接口修改完成后提交数据删除功能后端开设接口前端调用最终成果展示数据修改功能将之前的 B ...
vue表单数据加载/重置
实际项目中,我们的一些表单经常有默认值,在Vue中,我们可以直接在data中设置默认值. export default data() {return {formData: {name: '',regi ...

vue表单数据交互提交演示

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

1. 客户端 html

2. 服务端，以PHP为例

vue表单数据交互提交演示相关推荐

最新文章

热门文章