vue项目中使用jsonp方法

news/2024/6/17 18:07:47 标签: vue.js, 前端, javascript, jsonp

jsonp虽然是一项古老的技术,但是有时候没它不行,项目里面有个插件提供的就是使用jsonp的方式回调,所以总结一下jsonp的使用方法。

第一种,直接使用jquery提供的jsonp方法,我这里使用的是jquery的3.6.0版本,如下:

npm install -S jquery@3.6.0

然后代码里面:

javascript">import $ form 'jquery'

$.ajax({
			url : 'http://127.0.0.1:8070/IntelligentReminderCaller/openPageGet?JsonBase64UrlEncode=' + dataUrlEncode,
			dataType: "jsonp",
			jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
			jsonpCallback: "jsonpcallback",
			success : function(result) {
                //返回结果在这里
				//alert("through jsonp,receive data from other domain : " + result.ResultInfo);
				alert("返回参数:" + result.ResultInfo);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert("status:" + XMLHttpRequest.status + ";readyState:" + XMLHttpRequest.readyState + ";textStatus:" + textStatus);
			}
		});

第二种,自己写一个jsonp的方法,然后调用,如下:

javascript">//封装jsonp方法
function jsonp(setting){
	setting.data = setting.data || {}
	setting.key = setting.key||'callback'
	setting.callback = setting.callback||function(){} 
 //指定jsonp的回调方法名称
	setting.data[setting.key] = 'jsonpcallback'
 // jsonp回调方法
	window.jsonpcallback = function(data){
	  setting.callback (data);
	}
	var script = document.createElement('script')
	var query = []
	for(var key in setting.data){
	  query.push( key + '='+ encodeURIComponent(setting.data[key]) )
	}
	script.src = setting.url + '&' + query.join('&')
	document.head.appendChild(script)
	document.head.removeChild(script)
}
//使用jsonp
jsonp({
		url: 'http://127.0.0.1:8070/IntelligentReminderCaller/openPageGet?JsonBase64UrlEncode='+dataUrlEncode,
		key: 'callback',
		data: {},
		callback: function(res){
            //回调结果在这里
			console.log(res)
		}
	})

以上,打完收工!


http://www.niftyadmin.cn/n/1685466.html

相关文章

pandas学习笔记2

import numpy as np import pandas as pddate pd.date_range(start2018-7-1, end2018-12-21, freqD) df pd.Series(np.random.rand(len(date)), indexdate) #生成日期为index的dataframesum_wednesday df[df.index.weekday2].sum() #求…

python全站爬虫

通过正则表达式找到当前页面中的所有URL,储存在set中(剔除重复),用类似图数据结构的深度优先遍历算法遍历set,实现全站爬虫。 from urllib import request from bs4 import BeautifulSoup as bs import re import tim…

kindeditor 隐藏网络图片功能,只保留本地上传功能,并且将图片进行压缩处理

kindeditor 隐藏网络图片功能,只保留本地上传功能,并且将图片进行压缩处理 在使用kindeitor的时候,我们往往在使用图片功能的时候,包含两个部分,网络图片功能和本地上传功能,本文就告诉你如何隐 藏网络图片…

支持向量机分类模型

#-*- coding: utf-8 -*- import pandas as pdinputfile ../data/moment.csv #数据文件 outputfile1 ../tmp/cm_train.xls #训练样本混淆矩阵保存路径 outputfile2 ../tmp/cm_test.xls #测试样本混淆矩阵保存路径 data pd.read_csv(inputfile, encoding gbk) #读取数据&…

KindEditor编辑器使用

转载&#xff1a;http://www.cnblogs.com/gimin/p/4572849.html KindEditor使用 1&#xff09;kindeditor默认模式调用 <link rel"stylesheet" href"./KindEditor/themes/default/default.css" /> <script charset"utf-8" src"./…

简单!!!!kindeditor隐藏上传图片框网络图片或本地上传的功能

转载&#xff1a;http://www.lingchenliang.com/category-2.html kindeditor富文本编辑器点击上传图片按钮&#xff0c;在弹出的窗口中去掉上传网络图片的功能&#xff0c;只留下本地上传&#xff0c;如图&#xff1a; 以及关闭本地上传文件功能&#xff0c;只开启网络图片功能…

爬取小熊汽车油耗

首先获取各车型的网址 from urllib import request from bs4 import BeautifulSoup as bs import re import pandas as pdheaders {User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0} url "https://www.xiaoxiongyouhao.com/chxi…

利用c++ boost库求解一阶微分方程计算船舶运动

船舶类的头文件 vessel.h #pragma once #include"Eigen/Dense" #include"boost/numeric/odeint/stepper/runge_kutta_dopri5.hpp"class Vessel { public:static const size_t dim 3;typedef Eigen::Vector3d state_type;struct VesselMotion {Eigen::Vec…