<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-Ajax请求</title>
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src='../lib/vue-resource.js'></script>
</head>
<body>
<div id="app">
<p><input type="button" value="jsonp跨域请求" @click="getInfo"></p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'hello world'
},
methods:{
getInfo(){
this.$http.jsonp('http://api.vue-tp5.com/v1/index/index').then(function(result){
console.log(result)
}).catch(function(error){
console.log(error);
});
}
}
});
</script>
</html>
PHP代码
public function index()
{
$jsonp = $_GET['callback'];//get接收jsonp自动生成的函数名
echo $jsonp.'('.json_encode(['status' => 1, 'msg' => '这是v1版本的api默认控制器']).')';exit;
}
