如何让vue的axios组件和PHP后端交换数据
如何让vue的axios组件和PHP后端交换数据
内容导读
收集整理的这篇技术教程文章主要介绍了如何让vue的axios组件和PHP后端交换数据，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3382字，纯文字阅读大概需要5分钟。
内容图文
这篇文章主要介绍了关于如何让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 "axios"import qs from "qs"var 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' => 'yiiwebJsonParser' ], // 其他配置 ], //其他组件配置 ]
以上就是前端处理和后端处理两种解决方案，可根据实际情况选择
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何设置yii数据库的长连接
以上就是如何让vue的axios组件和PHP后端交换数据的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是为您收集整理的如何让vue的axios组件和PHP后端交换数据全部内容，希望文章能够帮你解决如何让vue的axios组件和PHP后端交换数据所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
