vue2.0 jsonp 与java后台实例备忘

配置callback返回的函数名，在后台中获取对应函数名，否则会报错。

import {getDataFunc} from 'api/category' import {ERR_OK} from 'api/config' export default { created(){ this._getCategory() }, data(){ return { categoryList:[] } }, methods:{ _getCategory(){ getDataFunc().then((res) => { console.log(res) // if (res.code === ERR_OK) { this.categoryList = (res.result.data) // } }) }, selectItem(item) { this. $router.push({ path: `/category/${item.categoryId}` }) // 写入数据 this.setCategory(item) }, ...mapMutations({ setCategory: 'SET_CATEGORY_LIST' }) }, components:{ Scroll, Loading } }

2.
import jsonp from ‘common/js/jsonp’
import {commonParams, options} from ‘api/config’

// 分类请求数据
export function getDataFunc(){
const url = ‘http://127.0.0.1:8081/qdriveradio/get_all_categories1’
const data = Object.assign({}, commonParams, {
product_id:201820182018//参数
})
console.log(jsonp(url, data,options))
return jsonp(url, data, options)
}

3.
import originJsonp from ‘jsonp’
// url应该为纯净的地址，data是数据
export default function jsonp(url, data, option) {
url += (url.indexOf(‘?’) < 0 ? ‘?’ : ‘&’) + param(data)
console.log(url)
return new Promise((resolve, reject) => {
// debugger
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
}
)
return new Promise(() => {})
})
}

export function param(data) {
let url = ”
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ”
// url += ‘&’ + k + ‘=’ + encodeURIComponent(value)
url += &${k}=${encodeURIComponent(value)}
}
return url ? url.substring(1) : ”
}

4.
import jsonp from ‘../common/js/jsonp.js’
‘use strict’;
// 请求中的通用参数
export const commonParams = {
g_tk: 1928093487,
inCharset: ‘utf-8’,
outCharset: ‘utf-8’,
notice: 0,
format: ‘jsonp’
}

export const options = {
param: ‘jsonpCallback’,
prefix: ‘jp’//callback中的回调function名称
}
// 请求正确的参数码
export const ERR_OK = 0

java：
@RequestMapping(value = “/get_all_categories1”, method = RequestMethod.GET, produces = “application/jsonp; charset=utf-8”)
public void getAllcategories1(@RequestParam Map