ajax前端局部页面刷新

1.jsp

       <div class="center-left">
            <div class="center-left-title">
                <%--<span><a href="/kms/knowledgeView/knowledgeDatas.do?type=1" >本月知识浏览前十排行</a></span>--%>
                <%--<span><a href="/kms/knowledgeView/knowledgeDatas.do?type=2">本季度知识浏览</a></span>--%>
                <%--<span><a href="#">半年度知识浏览</a></span>--%>
                <%--<span><a href="/kms/knowledgeView/knowledgeDatas.do?type=4">本年度知识浏览</a></span>--%>
                <span><a id="knowledgeMonth" class="glideLine"  onclick="curMonths('1')">本月知识浏览前十排行</a></span>
                <span><a id="knowledgeQuarter" onclick="curMonths('2')">本季度知识浏览</a></span>
                <span><a id="knowledgeHYear" href="#">半年度知识浏览</a></span>
                <span><a id="knowledgeYear" onclick="curMonths('4')">本年度知识浏览</a></span>
            </div>
            <div class="left-list-title">
                <span>名称</span>
                <p>次数</p>
            </div>
            <div class="center-left-list" id="addHtml">
                <%--<ul>--%>
                    <%--<c:forEach items="${data.list}" var="list">--%>
                    <%--<li>--%>
                        <%--<span title="${list.objname}">--%>
                            <%--<a target="_blank" href="/vdocument/base/docbaseview.jsp?id=${list.id}">--%>
                                <%--${fn:length(list.objname)>55 ? fn:substring(list.objname, 0, 55) : list.objname }--%>
                                <%--${fn:length(list.objname)>55 ? '...' : '' }--%>
                            <%--</a>--%>
                        <%--</span>--%>
                        <%--<p>${list.num}</p>--%>
                    <%--</li>--%>
                    <%--</c:forEach>--%>
                <%--</ul>--%>
            </div>
        </div>

2.js:定义一个全局让加载页面时加载方法

var reg="1";
//加载页面后加载方法
$(function () {
    curMonths(reg);
})
function curMonths(reg) {
    console.log(reg)
    if (reg=="1") {
        $('#knowledgeMonth').addClass("glideLine");
        $('#knowledgeQuarter').removeClass("glideLine")
        $('#knowledgeHYear').removeClass("glideLine")
        $('#knowledgeYear').removeClass("glideLine")
    }else if (reg=="2"){
        $('#knowledgeMonth').removeClass("glideLine");
        $('#knowledgeQuarter').addClass("glideLine")
        $('#knowledgeHYear').removeClass("glideLine")
        $('#knowledgeYear').removeClass("glideLine")
    }else if (reg=="3"){
        $('#knowledgeMonth').removeClass("glideLine");
        $('#knowledgeQuarter').removeClass("glideLine")
        $('#knowledgeHYear').addClass("glideLine")
        $('#knowledgeYear').removeClass("glideLine")
    } else {
        $('#knowledgeMonth').removeClass("glideLine");
        $('#knowledgeQuarter').removeClass("glideLine")
        $('#knowledgeHYear').removeClass("glideLine")
        $('#knowledgeYear').addClass("glideLine")
    }

    var insertHtml = "";
    $.ajax({
        url: "/kms/knowledgeView/knowledgeDatas.do",
        type: "POST",
        data: {type: reg},
        dataType: "json",
        success: function (data) {
　　　　　　//data是上面的，第二个data是controller中Map.put的值，第三个是逻辑层中的集合对象
            var result = data.data.list;
            insertHtml += " <ul>\n";
            for (var p in result) {
                insertHtml += " <li>\n" +
                    "                        <span title=\""+result[p].objname+"\">\n" +
                    "                            <a target=\"_blank\" href=\"/vdocument/base/docbaseview.jsp?id="+result[p].id+"\">"+subStr(result[p].objname)+"</a>\n" +
                                                 // <a target=\"_blank\" href=\"/vdocument/base/docbaseview.jsp?id="+result[p].id+"\">"+result[p].objname+"</a>\n" +
                    "                        </span>\n" +
                    "                        <p>"+result[p].num+"</p>\n" +
                    "                    </li>";
            }
            insertHtml += "</ul>";
            $('#addHtml').html(insertHtml)
        }
    });


//获取字段的字符大于55则进行截取
function subStr(objname) {
        var  name="";
        if (objname.length>55) {
             name=objname.substring(0,55)+"..."
            return name;
        }else{
            return objname;
        }

    }

}

3.controller:json返回

/**
     * 知识浏览月前十、季度、半年、年度
     */
    @RequestMapping("/kms/knowledgeView/knowledgeDatas")
    public void knowledgeDatas(HttpServletRequest request, HttpServletResponse response) throws IOException {
        JSONObject jsonObject=new JSONObject();
        PrintWriter writer = response.getWriter();
        KnowledgeSearchVo vo= WebUtils.requestToBean(request,KnowledgeSearchVo.class);
        Map<String,Object> data=knowledgeViewService.knowledgeData(vo);
        jsonObject.put("data",data);
        writer.write(jsonObject.toString());
        System.out.println(">>>>>>>>>>>>>>"+data);
        writer.close();
    }