在vue文件中，通過axios來遠程調用PHP產出的內容。
在實際開發中，我們常常需要用到PHP產出的數據，通過JS調用來在前臺處理。
方法一：內嵌法
在php文件里面寫JS內容，直接傳，案例如下：
<?php
//構造鏈接
$wx_url = "http://www.kartiktrivedi.com/";
?>
<button onclick="openWeapp()">點擊跳轉小程序哦</button>
<script>
var urlscheme= "<?php echo $wx_url ?>";
function openWeapp() {
//window.alert(1);
location.href = urlscheme;
}
</script>
如您所見，這樣并不優雅。
方法二：Axios獲取
php輸出數組，我們使用Axios遠程獲取即可。
新建test.php文件,輸入以下代碼
<?php
header('Content-Type:application/json');//加上這行,前端那邊就不需要var result = $.parseJSON(data);
$retdata = array(
"student"=>array("name"=>"feiq","sex"=>"male","age"=>18,"job"=>'agineer'),"superstar"=>array("name"=>"MM","sex"=>"female","age"=>20,"job"=>'signer')
);
echo json_encode($retdata);
?>
新建index.html，調用PHP的內容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>從php文件中異步獲取json數據</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="myphp">
<p>從php文件中讀取json數據</p>
<ol>
<li>名字</li>
<li v-for="sites in info">{{sites.name}}</li>
</ol>
<ol>
<li>性別</li>
<li v-for="sites in info">{{sites.sex}}</li>
</ol>
<ol>
<li>年齡</li>
<li v-for="sites in info">{{sites.age}}</li>
</ol>
<ol>
<li>職業</li>
<li v-for="sites in info">{{sites.job}}</li>
</ol>
</div>
<script>
const App = Vue.createApp({
data() {
return {
info: [],
}
},
mounted() {
axios
.get('test.php')
.then(response => {
console.log(response);
this.info = response.data;
})
.catch(function (error) {
alert(error)
})
}
})
App.mount("#myphp")
</script>
</body>
</html>其中的test.php，一般長這樣
http://www.kartiktrivedi.com/test/test.php注意
跨域問題涉嫌安全，請小心。
