首页 > 程序开发 > web前端 > JavaScript >

JavaWeb项目jquery ajax跨域请求node.js渲染highcharts

2014-01-23

$(function () { $ ajax({ url : & 039;http: 192 168 1 58:3000 china?datatime= & 039;+new Date() getTime(), beforeSend: function(){ $( " ozil-tab-wl ") a

    
    <script src="${pageContext.request.contextPath}/back/scripts/jquery-1.9.1.min.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/back/frame-lib/Highcharts-3.0.6/js/highcharts.js"></script>
    <script type="text/javascript">
		$(function () { 
			$.ajax({
				url : 'http://192.168.1.58:3000/china?datatime='+new Date().getTime(),
				beforeSend: function(){
					$("#ozil-tab-wl").append('
'); }, dataType : "jsonp", cache: false, success : function(myData) { console.info(myData); chart = new Highcharts.Chart({ data: { // table: document.getElementById('datatable') }, chart: { renderTo: 'container', //图表在页面显示容器 type: 'bar', //图表类型(line线性,此项为默认值) marginRight: 130, //右宽度(类css margin-right) marginBottom: 25 //下宽度 }, title: { text: 'ip地址全国分布', //正标题 x: -20 //center 默认标题居中,-20为相对居中往左20,往右则为正数 }, subtitle: { text: 'wifi客户端使用情况', //副标题 x: -20 }, xAxis: { //横坐标显示数据 categories: myData.cate }, yAxis: { //纵坐标标题 title: { text: 'ip使用个数' }, //标线属性 plotLines: [{ value: 0, width: 1, color: '#808080' }] }, //数据点的提示框内容 tooltip: { //数据格式,自定义 formatter: function() { return ''+ this.series.name +'
'+ this.x +': '+ this.y +'个数'; } }, //数据点参数选项 plotOptions: { line: { dataLabels: { enabled: true //数据点显示数据(默认为不显示) }, enableMouseTracking: false //当鼠标移到数据点上时,是否显示数据提示框(默认为显示) }, series: { cursor: 'pointer', point: { events: { click: function() { var ozilTWO = $("#ozil-tab-wl"); if(loadRequest) loadRequest.abort(); ozilTWO.html('
Loading...
'); loadRequest = $.ajax({ url : '${pageContext.request.contextPath}/back/ipvince.jsp', type : "post", dataType : "html", data : {myData : myData.cate[this.x]}, success : function (data){ ozilTWO.html(data); } }); } } } } }, //数据项显示位置(此例为: 'Tokyo', 'New York',显示位置为右边) legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, //需显示的数据内容 series: [{ name : myData.name, data : myData.data }] }); } }); }); </script>

node.js

1:app.js

/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/china', routes.china);
app.get('/province', routes.province);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

2:routes/index.js
/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

var urllib = require('url');
exports.china = function(req, res){
	var data = {
		name: '中国',  
		data: [
			448, 333, 125, 144, 223, 324, 55, 33,44,55,33,45,26,68,67,67,34,89,35,34,35,34,24,34,
			45,34,23,58,67,54,34,34,23,38
		],
		cate: [
			'北京市(京)','天津市(津)','上海市(沪)','重庆市(渝)','河北省(冀)','河南省(豫)','云南省(云)',
			'辽宁省(辽)','黑龙江省(黑)','湖南省(湘)','安徽省(皖) ','山东省(鲁)','新疆维吾尔(新)',
			'江苏省(苏)','浙江省(浙)','江西省(赣) ','湖北省(鄂) ','广西壮族(桂) ','甘肃省(甘)',
			'山西省(晋)','内蒙古(蒙)','陕西省(陕)','吉林省(吉)','福建省(闽)','贵州省(贵)','西藏(藏)',
			'广东省(粤)','青海省(青)','四川省(川)','宁夏回族(宁)','海南省(琼)','台湾省(台)','香港特别行政区',
			'澳门特别行政区'
		]	
	};
	var params = urllib.parse(req.url, true);
	console.log(params);
	if (params.query && params.query.callback) {
		//console.log(params.query.callback);
		var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
		res.end(str);
	} else {
		res.end(JSON.stringify(data));//普通的json
	}     
};

效果图:

相关文章
最新文章
热点推荐