vue表单数据交互提交演示

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

liguanjie8

13319人浏览 · 2018-12-03 17:26:43

liguanjie8 · 2018-12-03 17:26:43 发布

文章目录

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^