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); ~~~