ajax与后端交互

一、首先在前端创建ajax

$.ajax({
        url:root+'/app/desktop/getData.action',
        async:false,
        success:function (data,type) {
            var obj = eval('('+data+')');
            news = obj.newsCount;
            report = obj.reportCount;
            userReport = obj.findAccount;
        }
    });

这里设置async为false的目的是可以把json的值赋值给函数外部变量，同时使用eval函数使得可以使用obj.key得到value

二、在后端处理ajax请求

    @ResponseBody
    @RequestMapping("/getData.action")
    public Object getDate(){
        //平台文章待审查数
        Map map = new HashMap();
        Map<String, Object> params1 = new HashMap<>();
        params1.put("isApprovalSearch",0);
        params1.put("isDeleted",0);
        List<TAppSysNews> news = appSysNewsService.getList(params1);
        int newsCount = news.size();
        return map;

采用@ResponseBody可以直接以json的格式返回给前端，而不需要其他的复杂处理

三、前端处理返回的json串并且使用

    document.getElementById("approveNews").innerText="待审查的平台文章("+news+")";
    document.getElementById("roadReport").innerText="路况上报记录("+report+")";
    document.getElementById("approveFind").innerText="待审核的用户文章("+userReport+")";

这里是希望把得到的json数值赋值给jsp页面，在jsp中已经有相关的id

<td width="33%"><a id="approveNews" href=javascript:void(0)></a></td>
<td width="33%"><a id="roadReport" href=javascript:void(0)></a></td>
<td><a id="approveFind" href=javascript:void(0)></a></td>

如果是希望只添加文本内容，则使用innerText的方式，如果是希望加入html标签，则需要使用innerHtml