echarts图表动态获取后台数据详解(三)--ajax跨域请求

前面两篇文章,分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上,但是这都是在同一个项目下。要是遇到这样一种情况:要求新建一个项目(或者网站、网页),与后台数据库的那个项目不在一个项目上。但是,所要展示的数据,却要从后台数据库中索取。此时,ajax请求就要跨域了。简单的说:有A、B两个不同的项目,A要展示B数据库中的数据,以前直接使用的ajax请求就不行了,网上百度了很多,我在这里用到的是jsonp这种方法。下面做一下介绍:

1。详解(二)中的xxx.js页面里面的东西基本不变,稍微的修改一下其中的数据返回格式。

1).例如:之前的dataType:‘json’,这里就要修改为(dataType:'jsonp')

2).将请求方式修改为get,网上说jsonp不支持post请求方式,我也没去深究,将就用吧

3).添加jsonp:‘callback’,这是请求参数。是jsonp自带的请求参数。后台java代码中要用request.getParameter获取这个参数.

4).将url请求路径,修改为另外一个项目的全名路径。例:http://localhost:8080/项目名/xxx/xxx.do

其他没什么需要修改的地方,见图:

2。要使用jsonp,就要了解jsonp和json有什么不同,本人百度之后总结一句话,josn是{name:value}格式,

jsonp是 callback ( { name : value } ) 。jsonp就比json多了一个callback和(),所以java后台的代码也基本没什么变化。

需要修改后台java代码的地方:

1)。 String callback = request.getParameter("callback"); 这里需要接受jsonp传过来的叫callback的参数。

2)。 String data = JSON.toJSONString(list);---这是将封装好的list集合转换为json格式
          data = callback + "(" + data + ")";------------这是讲json格式转换为jsonp格式,上面提到,jsonp格式就比json多了一个callback和()而已。

3)。请将1、2对比下面的代码,其实也就多了1和2这两点:

3。到此为止,需要修改代码的地方就这些。下面直接上图,从一个项目动态的获取另外一个项目的后台数据,并展示在echarts图表上(可以对比一下详解二里面的图片,数据都是同一个数据):

PS:这里,结合前面两篇文章,组合成了一套流程。从echarts图表的建立,到后台获取数据,再到跨域获取后台数据。希望在

以后实际的项目中能用到的小伙伴,能从中找到一些思路,大神的话,砖就请轻轻的拍吧。谢谢。

猜你喜欢

转载自blog.csdn.net/zfb52572/article/details/78866174