精华内容
下载资源
问答
  • vue-jsonp
    2022-08-12 16:09:46

    main.js

    import { jsonp } from 'vue-jsonp'

    jsonp("//api.map.baidu.com/place/v2/search", {

      ak: "你的ak",

      query: '百度大厦',

      region:'北京',

      output: 'json',

      city_limit: true,

    }).then(res => {

      console.log('res', res);

    }).catch(err => {

      console.log('err', err);

    })

    更多相关内容
  • $jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} ) 直接使用功能: import { jsonp } from 'vue-jsonp'jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} )发送数据并设置查询和函数...
  • 最近有个vue3项目需要调用腾讯地图api,通过详细地址返回指定地址的经纬度,在调用时发现无论怎么调...import {jsonp} from 'vue-jsonp'; export default { name: 'HelloWorld', props: { msg: String }, mounted

    最近有个vue3项目需要调用腾讯地图api,通过详细地址返回指定地址的经纬度,在调用时发现无论怎么调都有问题,经过了一系列的尝试和百度后终于总结出一套能够走通的方法,现在分享给大家。
    安装vue-jsonp

    npm i vue-jsonp -D
    
    // HelloWorld.vue
    import {jsonp} from 'vue-jsonp';
    
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      mounted() {
        const params = {
          headers: {"content-type": "application/xml"},
          callbackQuery: "callbackParam",
          callbackName: "jsonpCallback"
        }
        //注意这里的地址参数需要连接起来中间不要有空格或者换行
        let url = `https://apis.map.qq.com/ws/geocoder/v1/?address=北京市海淀区彩和坊路海淀西大街74号&key=yourkey&output=jsonp&callback="jsonpCallback`; 
        jsonp(url, params).then(res => {
          console.log('res',res);
        }).catch(err => {
          console.log('err', err);
        })
      }
    }
    

    因为之前百度好多都是说的vue2项目引用vue-jsonp 插件,结果引用之后发现不好用,
    这里 主要是这句话

    //若单独在.vue文件中引入可以使用如下方法
    import {jsonp} from 'vue-jsonp'
    
    //在vue2中全局引入时,可以在 main.js中 引入 如下:
    import {VueJsonp} from 'vue-jsonp'
    Vue.use(VueJsonp);
    //然后再其他 .vue文件中使用如下:
    this.$jsonp(url, param)...
    
    //**值得注意的是需要使用 指定的参数才是最重要的,缺少某个重要参数就会报错**
    

    经过测试之后,发现上面的某些参数可以去掉,不会影响返回值,所以最终代码只需如下即可:

    <script>
    import {jsonp} from 'vue-jsonp';
    
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      mounted() {
        const params = { // 以下三个参数为 调通接口必填的参数,少一个则会报错
          output: 'jsonp', 
          address: "北京市海淀区彩和坊路海淀西大街74号",
          key: 'yourkey' //你自己申请的key
        }
        let url = `https://apis.map.qq.com/ws/geocoder/v1`;
        //若全局引用可使用 this.$jsonp
        //this.$jsonp(url, params).then(res => {
        //  console.log('res',res);
        //}).catch(err => {
        //  console.log('err', err);
        //})
        jsonp(url, params).then(res => {
          console.log('res',res);
        }).catch(err => {
          console.log('err', err);
        })
      }
    }
    </script>
    

    顺便看看返回结果:
    在这里插入图片描述
    最后附上在vue3中 vue-jsonp的全局使用方法:

    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import './index.css'
    import { jsonp } from 'vue-jsonp';
    
    const app = createApp(App);
    app.config.globalProperties.$jsonp = jsonp;
    app.mount('#app')
    
    // HelloWorld.vue
    import { onMounted } from 'vue'
    // import {jsonp} from 'vue-jsonp';
    import { getCurrentInstance } from 'vue'
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      setup(props, context) {
        const instance = getCurrentInstance()
        const jsonp = instance.appContext.config.globalProperties.$jsonp;
        onMounted(() => {
          const params = {
            output: 'jsonp',
            address: "北京市海淀区彩和坊路海淀西大街74号",
            key: 'yourkey'
          }
          let url = `https://apis.map.qq.com/ws/geocoder/v1`;
          jsonp(url, params).then(res => {
            console.log('res',res);
          }).catch(err => {
            console.log('err', err);
          })
        })
      }
    }
    </script>
    

    2021年8月29 亲测可用 额~~突然发现这个全局引用方法好麻烦啊,感觉不如单独引入 jsonp 插件了,大家有没有什么更好的办法,欢迎互相交流@。@

    展开全文
  • Vue插件之vue-jsonp

    千次阅读 2020-11-11 12:34:46
    axios不支持jsonp,所以需使用其他插件:vue-jsonpvue-jsonp官网 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而...

    简介

    axios不支持jsonp,所以需使用其他插件:vue-jsonp。vue-jsonp官网

    使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域。

    示例

    • 前端代码
      第一步:安装vue-resource模块,代码如下:

    cnpm install vue-jsonp --save

    第二步:在main.js中引入vue-resource并通过命令Vue.user()使用该插件

    import VueJsonp from ‘vue-jsonp’
    Vue.use(VueJsonp)

    第三步:页面

    <template>
      <div id="app">
        <button @click="getData()">请求数据</button>
        <ul>
          <li v-for="item in users">
            {{item}}
          </li>
        </ul>
      </div>
    </template>
    <script>
      export default {
        name: 'app',
        data() {
          return {
            users: []
          }
        },
        methods: {
          getData() {
            var url = 'http://127.0.0.1:8088/servlet/vue';
            this.$jsonp(url).then((response) => {
              console.log(response);
              this.users = response;
            }).catch((error) => {
              console.log(error);
            })
          }
        }, mounted() { //新新的时候数据就显示出来
          this.getData();
        }
      }
    </script>
    
    • 服务器端代码:
    @WebServlet(urlPatterns = "/servlet/vue")
    public class VueServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
    
            String callback = request.getParameter("callback");
            PrintWriter out = response.getWriter();
    
            List<User> userList = new ArrayList<>();
            userList.add(new User(11, "zhangsan", '女'));
            userList.add(new User(22, "lisi", '女'));
            userList.add(new User(33, "wanger", '女'));
            userList.add(new User(44, "mazi", '男'));
    
            String json = new Gson().toJson(userList);
            System.out.println("json " + json);
            out.write(callback + "(" + json + ")");
        }
    }
    
    展开全文
  • vue-jsonp的使用

    千次阅读 2021-11-10 17:08:08
    jsonp原理可以自行百度,这里记录一下vue-jsonp的使用和踩的一点小坑,官方文档请前往npm地址。 安装 npm install vue-jsonp -S 或者 yarn add vue-jsonp 使用 mian.js引用 // main.js import Vue from 'vue' ...

    前言

    最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用jsonp来实现。jsonp原理可以自行百度,这里记录一下vue-jsonp的使用和踩的一点小坑,官方文档请前往npm地址

    安装

    npm install vue-jsonp -S

    或者

    yarn add vue-jsonp

    在这里插入图片描述

    使用

    mian.js引用

    // main.js
    import Vue from 'vue'
    import { VueJsonp  } from 'vue-jsonp'
    Vue.use(VueJsonp) // $jsonp被挂载到vue原型上,可直接使用vm.$jsonp()
    

    注意:此处包版本为 2.0.0 ,导入时注意使用 { } 解构赋值,网上有部分教程为老版本,有需要可以前往前言中的npm官方地址,有具体使用教程。

    vue文件使用

    this.$jsonp('/some-jsonp-url', {
      myCustomUrlParam: 'veryNice'
    }).then(res => {
      // 此处代码不执行
      // 因为会直接调用返回的那个回调函数
    })
    

    假设返回的函数名称为callbackFun,需要 在window对象上绑定 callbackFun函数

    mounted() {
      // 将callbackFun方法绑定到window对象
      window['callbackFun'] = (data) => {
        cosole.log('定义的回调函数')
      }
      // 假设返回的为callbackFun.ajax_callback()
      window['callbackFun'] = {
        ajax_callback: function (res) {
          cosole.log('定义的回调函数')
        }
      }
    }
    

    注意:jsonp请求方式仅为 get

    展开全文
  • 主要介绍了Vue2.0 vue-source jsonp 跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue vue-jsonp 跨域

    千次阅读 2020-04-24 00:35:06
    vue-jsonp ● npm 安装 vue-jsonp npm install vue-jsonp --save npm i vue-jsonp ● 用法 静态函数: Vue.jsonp(url, dataObj, timeout) 在Vue组件中: this.$jsonp(url, dataObj, timeout) ● src/main.js 中添加...
  • vue引入vue-jsonp实现跨域的方法

    万次阅读 多人点赞 2020-10-22 16:43:03
    一、vue-jsonp实现跨域的方法 第一步: 添加依赖npm install vue-jsonp --save 第二步: 在vue cli项目main.js中添加 import{VueJsonp}from'vue-jsonp' // 网上很多博客引用不加{},会报错 Vue.use(VueJsonp)...
  • vue工程中使用vue-jsonp组建完成跨域请求,并介绍了过程中遇到的回调函数undefined问题的原理以及解决方式
  • vue-jsonp的跨域请求原理 1. 安装vue-jsonp 2. 在 main.js中导入vue-jsonp 3. 在 .vue 文件中使用 vue-jsonp的官网https://www.npmjs.com/package/vue-jsonp vue-jsonp的跨域请求原理 ajax请求受同源策略...
  • 1、执行命令:npm install vue-jsonp --save2、src/main.js中添加:import VueJsonp from 'vue-jsonp'Vue.use(VueJsonp)3、其它组件中基本使用方法:this.$jsonp(rootApi+'/company/Info'',传参参数对象{}).then...
  • vue-jsonp 的使用

    千次阅读 2020-08-11 17:50:30
    npm install vue-jsonp --save-dev 引入项目 import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) this.$jsonp(this.url, { }).then((json) => { // 返回的jsonp数据不会放这里,...
  • 通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback 获取城市: <div class=skycon></div> [removed] //导入jsonp插件 import jsonp from 'jsonp'; export default{ data(){ return...
  • Vue-Resource是提供了使用或JSONP发送web请求和处理响应服务的一个Vue.js插件。vue-resource发送网络请求,获取服务器数据: 分别发送get、post、jsonp请求
  • npm install vue-jsonp --save 2、src/main.js中添加: import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 3、其它组件中基本使用方法: let obj = { 'location':item.point.lat+...
  • 1. yarn add vue-resource 2. main.js引入vue-resource import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' import router from './router' import ...
  • npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组件中基本用法 this.$jsonp('/company/Info',{id:233,name:'zhangsan'}).then(json => {  //....
  • 由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用jsonp,则不存在这个问题。 主要是因为jsonp是在页面中插入一段js代码,而请求返回的也是一段js代码,插入到...
  • vue-clipboard2, 一个简单的vue2绑定到 clipboard.js vue-clipboard2clipboard.js的简单 vuejs 2绑定安装npm install --save vue-clipboard2 或者使用不带 web service的dist/vue-clipboard.min
  • 这里我们使用的是第三方插件jsonp。 github网址:https://github.com/webmodules/jsonp 1、安装 npm install jsonp -S 2、引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的...
  • vue-springboot-cros_jsonp:前初步跨域,cors,jsonp(新版springmvc)实现
  • 最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要...
  • vue-jsonp

    2017-07-02 14:00:00
    <script src="vue-resource.js"> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ ...
  • npm install vue-jsonp --save   2、src/main.js中添加: import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp)   3、其它组件中基本使用方法: this.$jsonp(rootApi+'/company/Info'', 传...
  • axios不支持jsonp请求,如果我们要用jsonp来请求数据可以使用fetch-jsonp这个模块 1.安装fetch-jsonp npm install fetch-jsonp --save 2.在main.js中全局引用 3.在文件中使用 4.要注意this的指向,function...
  • 原生js实现jsonp跨域 注意jsonp跨域需要后台支持。 实现效果 这里是用的必应每日壁纸api 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&...
  • import vueResource from 'vue-resource' 3.使用 vue.use(vueResource) 请求mock中的模拟数据 mounted(){ this.$http.post("/list").then((response)=>{ console.log(response.data); } //then...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,642
精华内容 5,456
关键字:

vue-jsonp