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

  1.  <!– jQuery –>
  2.     <script src=”${pageContext.request.contextPath}/back/scripts/jquery-1.9.1.min.js”></script>
  3.     <!– highcharts –>
  4.     <script type=”text/javascript” src=”${pageContext.request.contextPath}/back/frame-lib/Highcharts-3.0.6/js/highcharts.js”></script>
  5.     <script type=”text/javascript”>
  6.         $(function () {
  7.             $.ajax({
  8.                 url : ‘http://192.168.1.58:3000/china?datatime=’+new Date().getTime(),
  9.                 beforeSend: function(){
  10.                     $(“#ozil-tab-wl”).append(‘<div id=”container” style=”width:1200px;height:1800px;margin:100px auto;”></div>’);
  11.                 },
  12.                 dataType : “jsonp”,
  13.                 cache: false,
  14.                 success : function(myData) {
  15.                 console.info(myData);
  16.                     chart = new Highcharts.Chart({
  17.                         data: {
  18.                                    // table: document.getElementById(‘datatable’)
  19.                                 },
  20.                         chart: {
  21.                             renderTo: ‘container’,  //图表在页面显示容器
  22.                             type: ‘bar’,       //图表类型(line线性,此项为默认值)
  23.                             marginRight: 130,   //右宽度(类css margin-right)
  24.                             marginBottom: 25    //下宽度
  25.                         },
  26.                         title: {
  27.                             text: ‘ip地址全国分布’,    //正标题
  28.                             x: -20 //center  默认标题居中,-20为相对居中往左20,往右则为正数
  29.                         },
  30.                         subtitle: {
  31.                             text: ‘wifi客户端使用情况’,   //副标题
  32.                             x: -20
  33.                         },
  34.                         xAxis: {
  35.                             //横坐标显示数据
  36.                             categories: myData.cate
  37.                         },
  38.                         yAxis: {
  39.                                         //纵坐标标题
  40.                             title: {
  41.                                 text: ‘ip使用个数’
  42.                             },
  43.                             //标线属性
  44.                             plotLines: [{
  45.                                 value: 0,
  46.                                 width: 1,
  47.                                 color: ‘#808080’
  48.                             }]
  49.                         },
  50.                         //数据点的提示框内容
  51.                         tooltip: {
  52.                             //数据格式,自定义
  53.                             formatter: function() {
  54.                                     return ‘<b>’+ this.series.name +'</b><br/>’+
  55.                                     this.x +’: ‘+ this.y +’个数’;
  56.                             }
  57.                         },
  58.                         //数据点参数选项
  59.                         plotOptions: {
  60.                             line: {
  61.                                 dataLabels: {
  62.                                     enabled: true   //数据点显示数据(默认为不显示)
  63.                                 },
  64.                                 enableMouseTracking: false  //当鼠标移到数据点上时,是否显示数据提示框(默认为显示)
  65.                             },
  66.                             series: {
  67.                                 cursor: ‘pointer’,
  68.                                 point: {
  69.                                     events: {
  70.                                         click: function() {
  71.                                             var ozilTWO = $(“#ozil-tab-wl”);
  72.                                             if(loadRequest)
  73.                                                 loadRequest.abort();
  74.                                                 ozilTWO.html(‘<div id=”mst-loading” class=”ajax-effect”>Loading…<div class=”ajax-effect”></div></div>’);
  75.                                                 loadRequest = $.ajax({
  76.                                                     url : ‘${pageContext.request.contextPath}/back/ipvince.jsp’,
  77.                                                     type : “post”,
  78.                                                     dataType : “html”,
  79.                                                     data : {myData : myData.cate[this.x]},
  80.                                                     success : function (data){
  81.                                                         ozilTWO.html(data);
  82.                                                     }
  83.                                                 });
  84.                                         }
  85.                                     }
  86.                                 }
  87.                              }
  88.                         },
  89.                         //数据项显示位置(此例为: ‘Tokyo’, ‘New York’,显示位置为右边)
  90.                         legend: {
  91.                             layout: ‘vertical’,
  92.                             align: ‘right’,
  93.                             verticalAlign: ‘top’,
  94.                             x: -10,
  95.                             y: 100,
  96.                             borderWidth: 0
  97.                         },
  98.                         //需显示的数据内容
  99.                         series: [{
  100.                             name : myData.name,
  101.                             data : myData.data
  102.                         }]
  103.                     });
  104.                 }
  105.             });
  106.         });
  107.     </script>

node.js

1:app.js

 

[javascript]
  1. /**
  2.  * Module dependencies.
  3.  */
  4. var express = require(‘express’);
  5. var routes = require(‘./routes’);
  6. var user = require(‘./routes/user’);
  7. var http = require(‘http’);
  8. var path = require(‘path’);
  9. var app = express();
  10. // all environments
  11. app.set(‘port’, process.env.PORT || 3000);
  12. app.set(‘views’, path.join(__dirname, ‘views’));
  13. app.set(‘view engine’, ‘jade’);
  14. app.use(express.favicon());
  15. app.use(express.logger(‘dev’));
  16. app.use(express.json());
  17. app.use(express.urlencoded());
  18. app.use(express.methodOverride());
  19. app.use(app.router);
  20. app.use(express.static(path.join(__dirname, ‘public’)));
  21. // development only
  22. if (‘development’ == app.get(‘env’)) {
  23.   app.use(express.errorHandler());
  24. }
  25. app.get(‘/’, routes.index);
  26. app.get(‘/users’, user.list);
  27. app.get(‘/china’, routes.china);
  28. app.get(‘/province’, routes.province);
  29. http.createServer(app).listen(app.get(‘port’), function(){
  30.   console.log(‘Express server listening on port ‘ + app.get(‘port’));
  31. });

2:routes/index.js

[javascript] 
  1. /*
  2.  * GET home page.
  3.  */
  4. exports.index = function(req, res){
  5.   res.render(‘index’, { title: ‘Express’ });
  6. };
  7. var urllib = require(‘url’);
  8. exports.china = function(req, res){
  9.     var data = {
  10.         name: ‘中国’,
  11.         data: [
  12.             448, 333, 125, 144, 223, 324, 55, 33,44,55,33,45,26,68,67,67,34,89,35,34,35,34,24,34,
  13.             45,34,23,58,67,54,34,34,23,38
  14.         ],
  15.         cate: [
  16.             ‘北京市(京)’,’天津市(津)’,’上海市(沪)’,’重庆市(渝)’,’河北省(冀)’,’河南省(豫)’,’云南省(云)’,
  17.             ‘辽宁省(辽)’,’黑龙江省(黑)’,’湖南省(湘)’,’安徽省(皖) ‘,’山东省(鲁)’,’新疆维吾尔(新)’,
  18.             ‘江苏省(苏)’,’浙江省(浙)’,’江西省(赣) ‘,’湖北省(鄂) ‘,’广西壮族(桂) ‘,’甘肃省(甘)’,
  19.             ‘山西省(晋)’,’内蒙古(蒙)’,’陕西省(陕)’,’吉林省(吉)’,’福建省(闽)’,’贵州省(贵)’,’西藏(藏)’,
  20.             ‘广东省(粤)’,’青海省(青)’,’四川省(川)’,’宁夏回族(宁)’,’海南省(琼)’,’台湾省(台)’,’香港特别行政区’,
  21.             ‘澳门特别行政区’
  22.         ]
  23.     };
  24.     var params = urllib.parse(req.url, true);
  25.     console.log(params);
  26.     if (params.query && params.query.callback) {
  27.         //console.log(params.query.callback);
  28.         var str =  params.query.callback + ‘(‘ + JSON.stringify(data) + ‘)’;//jsonp
  29.         res.end(str);
  30.     } else {
  31.         res.end(JSON.stringify(data));//普通的json
  32.     }
  33. };

效果图:
 

更多0 

标签