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


Posted in Javascript onNovember 13, 2019

欢迎来到 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表单数据交互提交演示教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
React自定义hook的方法
Jun 25 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php实现字符串翻转的方法
2015/03/27 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python实现三维拟合的方法
2018/12/29 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
基于python实现操作redis及消息队列
2020/08/27 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
汇源肾宝广告词
2014/03/20 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript