您好,欢迎访问一九零五行业门户网

如何让vue的axios组件和PHP后端交换数据

这篇文章主要介绍了关于如何让vue的axios组件和php后端交换数据,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
一、前言axios是vue项目中用来使用ajax技术来与后台交换数据的一个组件,在vue的作者推荐下,相当数量的vue前端开发人员开始使用它。但是在实际开发过程中,却时有出现后端接收不到前端post过来的数据的情况。以php语言开发的后台为例,php原生的预定义变量$_post就无法接收(因为解析失败)。本文的目的在于探讨前后端数据交互,并给出不同的解决方案供大家参考。
二、目前$_post可接收的数据形式form data
这种数据形式其实就是键值对,例如id:1,如果有多组键值对并且有嵌套的情况,则如下
role-name:tarole-desc:xxxxxxxxxid:2cloud[cla]:001cloud[cla_baijia]:001cloud[cla_gongkai]:001local[soft5]:001local[soft6]:001mgmt[mgmt-clouditems]:01
php服务端接收到的数据其实是这样子的
role-name=ta&role-desc=xxxxxxxxx&id=2&cloud%5bcla%5d=001&cloud%5bcla_baijia%5d=001&cloud%5bcla_gongkai%5d=001&local%5bsoft-5%5d=001&local%5bsoft-6%5d=001&mgmt%5bmgmt-clouditems%5d=01
是不是与url的参数特别像?
这种键值对的数据被称为querystring,浏览器的原生 form 表单发送这种数据时会把请求头设为application/x-www-form-urlencoded。
querystring就能被php的$_post成功解析
经典的前端库jquery下的jquery ajax 的 serialize()方法和param()方法就是为把数据转化为querystring而提供的解决方案,前者转化表单数据,后者转化json数据。
而且jquery的ajax请求中会判断传入的数据形式,隐式调用param()方法来转化json数据,所以使用者只需直接提供json数据即可成功把数据成功提交到后台,需要显式(手动)调用param()方法的机会不多。jq默认的发送的请求头也是application/x-www-form-urlencoded,大多数情况下并不需要使用者手动设置。
回到我们的axios中,axios默认发送的请求头为application/json,简单来说,它默认就是会把json传到后端,并不转化为querystring。
三、解决方法1、前端把数据转化为querystring引入qs库,调用stringify方法
<template>  <p>      <input type="button" name="login" value="数据提交" @click="post">  </p></template><script>import axios from axiosimport qs from qsvar json={              role-name: ta,              role-desc: xxxxxxxxx,              id: 2,              cloud: {                cla: 001,                cla_baijia: 001,                cla_gongkai: 001              },              local: {                soft-5: 001,                soft-6: 001              },              mgmt: {                mgmt-clouditems: 01              }    };export default {    methods:{        post(){            axios.post(http://localhost/web/index.php/admin/login/login,json,{                //配置`transformrequest` ,在向服务器发送前,修改请求数据,axios会根据修改后的数据,自动设置请求头                transformrequest:[function(data){                    return qs.stringify(data);//把数据转化为querystring                }]            }).then(res=>{                console.log(res);            })        }    }}</script>
2、php后端使用php://input获取原始数据在前端不做任何改变的情况下,因为预定义变量$_post无法解析,php后端只能使用php://input获取原始的数据,然后再转化为想要的数据形式。
如果php后台使用原生开发,则可自定义一个函数处理每次请求的数据。
如果php后台使用特定的框架开发,则要看框架本身是否支持处理php://input,简单的一个测试方法就是在框架的源代码全文搜索php://input,如果能搜到,则有支持,否则不支持,需要自己扩展相关的处理代码。
以php框架yii2.0为例,全文搜索vendor目录,可知在yiisoft->yii2->web->request.php的494行有相关处理代码。
实际使用只需在配置文件web.php配置
'components' => [        'request' => [            'parsers' => [                'application/json' => 'yii\web\jsonparser'            ],            // 其他配置        ],        //其他组件配置    ]
以上就是前端处理和后端处理两种解决方案,可根据实际情况选择
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!
相关推荐:
如何设置yii数据库的长连接
关于yii改善并发数的性能优化的方法
以上就是如何让vue的axios组件和php后端交换数据的详细内容。
其它类似信息

推荐信息