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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
PHP PDO操作总结
Nov 17 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
东方红 - 来复式再生机的修复
2021/03/02 无线电
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python脚本监控docker容器
2016/04/27 Python
python实现发送邮件功能代码
2017/12/14 Python
Python实现结构体代码实例
2020/02/10 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Django自带的用户验证系统实现
2020/12/18 Python
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
土木工程专业自荐信
2013/10/04 职场文书
股东协议书
2014/04/14 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis