Vue使用axios提交表单数据

最新推荐文章于 2024-10-13 09:36:45 发布

php_kevlin

最新推荐文章于 2024-10-13 09:36:45 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/kevlin_V/article/details/117393198

前端专栏收录该内容

6 篇文章

订阅专栏

本文展示了如何使用Vue.js和Axios库来提交表格数据。通过实例代码，作者详细解释了如何处理表格数据，将其转换为JSON格式，并通过POST方法发送到服务器。同时，还给出了PHP端接收数据的简单示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<html>
<head>
    <title>Vue提交表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        /*boder-collapse 为表格设置合并边框模型*/
        table{border-collapse:collapse;border: 1px solid blue}
        th,td{border:1px solid blue}

    </style>
</head>
<body>
<div align="center" id="app">
<h1>欢迎来到vue-form表单提交演示间</h1>
<table>
    <thead>
    <tr>
        <th>name</th>
        <th>sex</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(v,i) in tableData">  <!-- vue严格区分大小写-->
        <td>{{v.name}}</td>
        <td>{{tableData[i].sex}}</td>
        <td><input type="text" v-model="v.age"></td>
    </tr>
    </tbody>
</table>
<p>
    <button @click="submit">提交</button>  <!-- “v-on:”为绑定html事件,简写为@  ；官方解释用于监听 DOM 事件-->
</p>
</div>
</body>
<script>
    var app= new Vue({
        el:'#app', //vue挂载的元素节点 可以是css选择符，HTML元素
        data:{
            tableData:[
                {
                "name":211,
                "sex":"男",
                "age":18
            },{
                "name":985,
                "sex":"女",
                "age":18
            }],
            form:{
                first:"first record",
                last:"last record"
            }
        },
        methods: {
            submit: function () {
                function jsonData(arr) {
                    //Json.parse将字符串转换成json对象
                    //Json.stringify将json对象转换成json字符串
                    let json = "";
                    function fors(data,attr){
                        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];
                                }
                            }
                        }
                        return json;
                    }
                    fors(arr);
                    return json
                }
//                console.log(jsonData(this.tableData)); //&name[]=211&sex[]=男&age[]=18&name[]=985&sex[]=女&age[]=18
                //提交用户数据
                axios({
                    url:"http://www.easyadmin.com/index.php",
                    method:"post",
                    data:jsonData(this.tableData),
                    //transformRequest允许向服务器发送数据之前修改请求数据 可删除
                    transformRequest:[function (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 (response) {
                            console.log("数据提交成功");
                            console.log(response);
                        })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    });
</script>

</html>

php代码：

<?php
header("Access-Control-Allow-Origin:*");
$form = file_get_contents('php://input');
//$form = json_decode($form);
exit($form);

在这里插入图片描述
参考链接：https://blog.youkuaiyun.com/liguanjie8/article/details/84774737