JavaWeb項目jquery ajax跨域請求node.js渲染highcharts

    
    <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 : 'https://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
	}     
};

效果圖:

You May Also Like