vue-cli4.0 使用 jsonp

2020-07-27 07:32:11 阅读：352 来源： 互联网

标签：cli4.0 vue const oLi window jsonp test

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;

标签：cli4.0,vue,const,oLi,window,jsonp,test
来源： https://www.cnblogs.com/kdgcp/p/13383447.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-cli4.0 使用 jsonp