axios POST请求数据 · vue

# vue发送post的第一中方法： # vue中 ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div id="app"> <button type="button" @click="getDate">获取数据</button> <p>{{user.name}}=={{user.age}}</p> </div> </body> </html> <script type="text/javascript"> var vm= new Vue({ el:'#app', data:{ user:'1223' }, methods:{ getDate:function (){ data={name:'liudehua',age:33} //发送的数据 axios.post('http://127.0.0.1/index.php',data).then(res=>{ //发送POST请求 this.user=JSON.parse(res.data) //接收回来的数据转JSON并赋值给data里的user }) } } }) </script> ~~~ # PHP中 ~~~ <?php header("Access-Control-Allow-Origin:*"); //必须加上 header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); //必须加上 $user=file_get_contents('php://input'); echo json_encode($user); ~~~ # vue发送post的第二中方法：要发送的数据加Qs.stringify() 这样PHP里就可以正常接收引入qs.js库 ~~~ <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script> ~~~ ~~~ getDate:function (){ data=Qs.stringify({name:'liudehua',age:33}) //发送的数据要加Qs.stringify(JSON) axios.post('http://127.0.0.1/index.php',data).then(res=>{ //发送POST请求 this.user=JSON.parse(res.data) //接收回来的数据转JSON并赋值给data里的user }) } ~~~ # 第二种方法vue文件： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script> <title>Document</title> </head> <body> <div id="app"> <button type="button" @click="getDate">获取数据</button> <p>{{user.name}}=={{user.age}}</p> </div> </body> </html> <script type="text/javascript"> var vm= new Vue({ el:'#app', data:{ user:'1223' }, methods:{ getDate:function (){ data=Qs.stringify({name:'liudehua',age:33}) //发送的数据要加Qs.stringify(JSON) axios.post('http://127.0.0.1/index.php',data).then(res=>{ //发送POST请求 console.log(res.data) this.user=res.data //接收回来的数据转JSON并赋值给data里的user }) } } }) </script> ~~~ # 第二种方法PHP里的文件： ~~~ <?php header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); $user=$_POST; echo json_encode($user); ~~~