vue表单数据交互提交演示

最新推荐文章于 2024-06-17 10:36:49 发布

liguanjie8

最新推荐文章于 2024-06-17 10:36:49 发布

阅读量1.3w

点赞数 3

分类专栏： ES6 vueJs 文章标签： form vue axios

本文链接：https://blog.csdn.net/liguanjie8/article/details/84774737

版权

ES6 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vueJs

19 篇文章 0 订阅

订阅专栏

文章目录

- 欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！
- - 1. 客户端 html
  - 2. 服务端，以PHP为例

欢迎来到 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);

liguanjie8

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue表单数据交互提交演示

文章目录欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！1. 客户端 html2. 服务端，以PHP为例欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！1. 客户端 html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UT...
复制链接

扫一扫

专栏目录