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>
结果演示：
先时刚加载界面：
然后是点击请求后：
浏览器出现问题，排版格式一直报错，但是不影响布局。
