1. 安装jsonp扩展

cnpm i vue-jsonp —save-dev

 

2. /src/main.js 引入

1 // 引入 vue-jsonp
2 import VueJsonp from 'vue-jsonp'
3 
4 // 使用 vue-jsonp
5 Vue.use(VueJsonp, 5000)

3. 使用，JSONP的回调函数要写到 window 对象上，不然无法触发，如果有更好的方法请留言，谢谢

 1 <template>
 2   <div class="hello container">
 3     <h1>{{ msg }}</h1>
 4     <button class="btn btn-primary" @click="sendJsonp">JSONP</button>
 5     <ul id="list"></ul>
 6   </div>
 7 </template>
 8 
 9 // 引入 vue-jsonp
10 import jsonp from 'vue-jsonp'
11 
12 // 回调函数必须定义到 window 对象上
13 window.test = (data) => {
14   //获取外层 SECTION
15   const oList   =   document.getElementById('list');
16   oList.className = 'list-group';
17   //PHP json_encode() 返回的数据在JS为数组类名
18   const aDate   =   data;
19 
20   for (var i = 0; i < aDate.length; i++) {
21     //创建 LI 标签
22     const oLi = document.createElement('li');
23     oLi.className = 'list-group-item';
24     //将数组中的信息添加到 LI 中
25     oLi.innerHTML = aDate[i];
26     //将 LI 追加到 UL 中
27     oList.appendChild(oLi);
28   }
29 }
30 
31 export default {
32   name: 'HelloWorld',
33   data () {
34     return {
35       msg: 'Welcome to Your Vue.js App'
36     }
37   },
38   methods: {
39     sendJsonp() {
40       this.$jsonp('http://www.api.test/test/jsonp/index.php', {
41         // 回调函数
42         m: 'test',
43         name: 'MyName',
44         age: 20
45       }).then(json => {
46 
47       }).catch(err => {
48         // Failed.
49       })
50     }
51   }
52 }

 

4. 后端PHP测试代码

 1 <?php
 2     header('content-type:text/html;charset=utf-8');
 3     // http://www.api.test/test/02/index.php
 4     $method = $_GET['m'];
 5     $arr = array(
 6         'linux',
 7         'apache',
 8         'mysql',
 9         'php'
10     );
11 
12     $callBack = $method . '(' . json_encode($arr) . ')';
13 
14     echo $callBack;