vue中jsonp插件的使用方法示例

2024-07-30 14:43:11

通过jsonp简单获取接口数据，对了，注意下jsonp方法会自动添加callback

<template>
	<div class="sky">
		<h3>获取城市：</h3>
		<div class="skycon"></div>
	</div>
</template>

<script>
//导入jsonp插件
import jsonp from 'jsonp';

export default{
	data(){
		return {

		}
	},
	created(){
		//jsonp请求数据
		this.getLocation()
	},
	methods:{
		getLocation(){
			let url = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1599182599164"
			//jsonp方法会自动添加callback
			jsonp(url,{},(err,data)=>{
				//url地址 //{}参数 //(err,data)错误信息，获取的数据
				console.log(data)
			})
		}
	}
}
</script>

<style>
</style>

总结

到此这篇关于vue中jsonp插件的使用的文章就介绍到这了,更多相关vue中jsonp插件使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解如何在Vue项目中发送jsonp请求

起因公司临时要支撑河南的一个项目,做一个单点登录的功能. 简单来说,就是以下3步客户方点击某个按钮进入我们的页面a 在页面a中由前端发送一个jsonp请求到客户方,得到一个token值前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已登陆,若登陆则根据取到的工号等信息后端模拟登陆,若没有登陆,则跳转到客户方登陆页面怎么做发送jsonp请求,axios
解决vue项目报错webpackJsonp is not defined问题

在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',
vue中利用Promise封装jsonp并调取数据

Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败)两个结果. 这两个结果不会改变.然后结果结束后就会用then来执行相应的结果. new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成
Vue项目中使用jsonp抓取跨域数据的方法

下载jsonp npm install jsonp 在js文件夹下新增一个jsonp.js,来封装一个jsonp() 如何封装一个jsonp() 在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数: 引入下载的jsonp import originJsonp from 'jsonp': 导出自己定义的jsonp函数 //这个jsonp函数是我们自己定义的,与上面的originJsonp不是同一个,originJsonp是一个可以直接引用的
vue基础之使用get、post、jsonp实现交互功能示例

本文实例讲述了vue基础之使用get.post.jsonp实现交互功能.分享给大家供大家参考,具体如下: 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>
VUE2.0中Jsonp的使用方法

本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的
vue使用jsonp抓取qq音乐数据的方法

1.安装jsonp npm install jsonp 2.创建jsonp.js文件,内容如下: import originJSONP from 'jsonp' /** * 封装jsonp * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装 * @param {obj} data 参数 * @param {*} option jsonp的option */ export default function jsonp (u
Vue2.0 vue-source jsonp 跨域请求

本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex
基于vue-resource jsonp跨域问题的解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就
vue项目中jsonp跨域获取qq音乐首页推荐问题

自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目.在项目中也是遇到了很多的问题. 接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错. 第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装. 使用 npm 引入,输入: npm install jsonp --save 安装好之后可以在自己的 package.json 文件中查看是否有此依赖.如下图所示: 如果有红框中显示的内容,说明安装成功,进入下一步封装: impo

vue中jsonp插件的使用方法示例

相关推荐

随机推荐