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图表的建立，到后台获取数据，再到跨域获取后台数据。希望在

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