jquery的jsonp相关
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<script src="../../js/jquery-1.9.1.min.js"></script>
<script src="../../js/highmaps/highmaps.js"></script>
<script src="../../js/highmaps/drilldown.js"></script>
<script src="../../js/highmaps/exporting.js"></script>
</head> <body>
<!--<div id="container" style="height:450px;"></div>-->
<script type="text/javascript"> Highcharts.setOptions({
lang: {
drillUpText: '< 返回 “{series.name}”'
}
});
var map = null,
// geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
// $.getJSON(geochina + 'china.json&callback=?', function(mapdata) {//中国//https://jshare.com.cn/highmaps/FSSm7A //https://data.jianshukeji.com/
// geochina = 'http://192.168.0.62:8082/';
geochina = 'http://192.168.0.62:8082/jsonp/geo?filename=';
$.getJSON(geochina + 'zhejiang.json&callback=?', function(mapdata) {//浙江
//地图数据 https://data.jianshukeji.com/jsonp?filename=geochina/zhejiang/hangzhou.json
//地图数据 https://data.jianshukeji.com/jsonp?filename=geochina/zhejiang.json
var data = [];
// 随机数据
Highcharts.each(mapdata.features, function(md, index) {
var tmp = {
name: md.properties.name,
value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
};
if(md.properties.drilldown) {
tmp.drilldown = md.properties.drilldown;
}
data.push(tmp);
});
map = new Highcharts.Map('container', {
chart: {
events: {
drilldown: function(e) {
this.tooltip.hide();
console.log(e);
// 异步下钻
if (e.point.drilldown) {
var pointName = e.point.properties.fullname;
map.showLoading('下钻中，请稍后...');
// 获取二级行政地区数据并更新图表
console.dir(geochina);
$.getJSON(geochina + e.point.drilldown + '.json&callback=?', function(data) {
// $.getJSON(url, function(data) {
data = Highcharts.geojson(data);
Highcharts.each(data, function(d) {
if(d.properties.drilldown) {
d.drilldown = d.properties.drilldown;
}
d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
});
map.hideLoading();
map.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
map.setTitle({
text: pointName
});
});
}
},
drillup: function() {
map.setTitle({
text: '浙江省'
});
}
}
},
title: {
text: '浙江省'
},
subtitle: {
useHTML: true,
// text: '点击查看 <a href="https://www.hcharts.cn/mapdata" target="_blank">地图数据及详情</a>，注意县级数据为收费数据，如果您有需要，请 <a href="https://highcharts.com.cn/data" target="_blank">联系我们购买</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
useHTML: true,
headerFormat: '<table><tr><td>{point.name}</td></tr>',
pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
'<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
'<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
'<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' ,
footerFormat: '</table>'
},
// colorAxis: {
// min: 0,
// minColor: '#fff',
// maxColor: '#006cee',
// labels:{
// style:{
// "color":"red","fontWeight":"bold"
// }
// }
// },
series: [{
data: data,
mapData: mapdata,
joinBy: 'name',
name: '浙江省',
states: {
hover: {
color: '#a4edba'
}
}
}]
});
});
</script>
<div id="container" style="height:850px;"></div> </body>
</html> 、、、、、、、、、、、、、、、、、、、、、 后端：
package com.hzunitech.platform.mvc.jsonp; import com.hzunitech.platform.annotation.Controller;
import com.hzunitech.platform.mvc.base.BaseController;
import com.jfinal.log.Log; @Controller("/jsonp")
public class JsonpController extends BaseController { @SuppressWarnings("unused")
private static final Log log = Log.getLog(JsonpController.class); public void index() {
// 客户端请求参数，js函数名称
String jsonpCallback = getPara("callback"); // json数据
String json = "{'content':'我是远程b.com/remote.js带来的数据'}"; // 返回jsonp格式数据
//jquery定义了名为jsonpCallback的js函数，在渲染返回的javascript text时执行了该函数，并将数据结果作为参数传入该js函数
renderJavascript(jsonpCallback + "(" + json + ");");
} public void geo() {
// 客户端请求参数，js函数名称
String jsonpCallback = getPara("callback");
log.info(jsonpCallback);
System.out.println(jsonpCallback); // json数据
String json = "{'content':'我是远程b.com/remote.js带来的数据'}"; // 返回jsonp格式数据
renderJavascript(jsonpCallback + "(" + json + ");");
} }
jquery的jsonp相关的更多相关文章
- jquery之jsonp相关知识
这里讲的不错,可以参考:链接 我自己的理解: 服务器为了保证数据的安全,同时也为了保证不被攻击, 凡是来服务器请求的url,域名必须和服务器一致,否则就是跨域请求 为了解决跨域问题,就出现了jsonp ...
- 使用springMVC和Jquery实现JSONP
JSONP这个东东是啥我就不写了,直接贴实现的代码 JAVA代码: /** * * 查询用户是否已经提交认证获取已经是认证会员 * * 使用spring mvc的直接返回string会遇到分号转义后字 ...
- jQuery处理JSONP
http://www.g7blogs.com/?p=821 作为一枚前端,提起jsonp大家都不会陌生.特别是在我们组内的业务中,和服务器端交互的数据几乎都是采用这种形式.但假如要让你用原生的JS写出 ...
- jQuery 调用jsonp实现与原理
jQuery 调用jsonp实现与原理 您的评价: 收藏该经验 阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...
- jQuery的jsonp跨域是这么回事.
实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- 基于jQuery的Jsonp跨域[Get方式]
由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
- jQuery中jsonp函数实现
由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...
- C# WebClient、jQuery ajax jsonp实现跨域
WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...
随机推荐
- SqlCommandBuilder的作用
最近看一个案例,关于如何向数据库传数据,颇有发现. 以前我的数据都是采用Sql代码用SqlCommand一条一条语句的传入数据库. 但是今天发现有更好的方法. 代码如下: SqlConnection ...
- JavaScript中使用JSON，即JS操作JSON总结
JSON(JavaScript Object Notation 对象标记) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生 ...
- IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...
- MYSQL手工注入某日本网站
作者:ice 团队:www.anying.org 转载必须注明. E-mail:1c30day@gmail.com 经过一天的辛苦劳动下班了,实在无聊,QQ上的基友基本都挂机睡觉了.找点乐子打发时 ...
- Atitit.异常的设计原理与 策略处理 java 最佳实践 p93
Atitit.异常的设计原理与 策略处理 java 最佳实践 p93 1 异常方面的使用准则,答案是:: 2 1.1 普通项目优先使用异常取代返回值,如果开发类库方面的项目,最好异常机制与返回值都提供 ...
- Django项目国际化
Django项目国际化 实验环境: py3.4.3 + django1.8.2 + Windows 项目设置 >django-admin startproject I18nDjango > ...
- php用explode，可以提供多个字符作为分割符来进行分割数组吗?
explode — 使用一个字符串分割另一个字符串, 它的函数原型如下: array explode ( string $delimiter , string $string [, int $limi ...
- 前端_basic
web: 分三部分:1.HTML:2.CSS:3.JavaScript. 1.HTML:用来构建网页的结构和内容: 2.CSS:用来给网页化妆,美化网页: 3.JavaScript:用来让网页呈现动态 ...
- What is Web Application Architecture? How It Works, Trends, Best Practices and More
At Stackify, we understand the amount of effort that goes into creating great applications. That’s w ...
- 使用ASM获得JAVA类方法参数名
在Java1.8之后,可以通过反射API java.lang.reflect.Executable.getParameters来获取到方法参数的元信息,(在使用编译器时加上-parameters参数, ...