Springmvc来做甘特图的显示控制。

springmvc没有Springboot好用；所以就用了ajax通信来获取数据，这其中有不少坑，我来带大家踩一踩。

　　1.在控制层中，接口不能直接返回Json格式。

　　　　

我的解决方法可以使通过map,或者自己新建一个响应实体类，接口返回实体类或Map.

　　2.通过按钮来拿到接口传过来数据，然后转换。

//全部变量定义。

var lyhGanttuData={];

//在调用接口获取数据的方法里，

　　　  lyhGanttuData=JSON.parse(ajaxObj.responseText);//这个是把string类型转为Json格式，不然数据无效

3.获取数据JS。

　　　　document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步

// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();

// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', 'http://localhost:8080/Demo/home/gantee');

// （3）发送请求
ajaxObj.send();

//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');

// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);

// 修改页面的显示
// document.querySelector('h1').innerHTML = ajaxObj.responseText;
//将String转换为Json格式
lyhGanttuData=JSON.parse(ajaxObj.responseText);
$(function() {
lyhGanttuInit('lyh-ganttu'); //甘特图初始化
})
}
}
}

当然这个btnAjax'，是界面一个按钮。

<div id = '123'>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

</div>

结果演示：

先时刚加载界面：　　

　　

然后是点击请求后：

浏览器出现问题，排版格式一直报错，但是不影响布局。