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

网络编程 2021-07-04 15:02www.168986.cn编程入门

今天长沙网络推广就为大家分享一篇vue表单数据交互提交演示教程，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

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

1. 客户端 html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr./npm/vue/dist/vue.js"></script>
 <!-- 生产环境版本，优化了尺寸和速度 -->
 <!--<script src="https://cdn.jsdelivr./npm/vue"></script>-->

 <!-- axios -->
 <script src="https://unpkg./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--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("Aess-Control-Allow-Origin:");
header('Aess-Control-Allow-Headers:x-requested-with,content-type');

/
  接收 x--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表单数据交互提交演示教程就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：Vue的click事件防抖和节流处理详解下一篇：解决vuex数据异步造成初始化的时候没值报错问题

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设