ajax前端局部页面刷新

Posted 2021-11-02 java璀璨小菜鸟

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) {
            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].objname+"\\">"+result[p].objname+"</a>\\n" +
                    "                        </span>\\n" +
                    "                        <p>"+result[p].num+"</p>\\n" +
                    "                    </li>";
            }
            insertHtml += "</ul>";
            $(\'#addHtml\').html(insertHtml)
        }
    });

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();
    }

 

iframe 和ajax局部刷新的区别

iframe局部刷新 和ajax局部刷新都有啥区别，既然iframe能实局部刷新，为什么还要用ajax

参考技术A iframe是一个内联框架，你可以理解为在原有的HTML内多出的一个独立的框架，从刷新这个框架能做到类似“局部刷新”的效果。
而AJAX是一种局部刷新的技术，它本身而言可以针对这个页面所有的元素，而不像iframe那样，只能局部刷新其“圈起来”的部分。
从性能上来说，如果一个页面比较大，对局部刷新比较多的情况下，比如有太多地方都可能需要独立刷新，如果你用N个iframe的话，对系统的性能消耗就比较明显了，直接的结果就是页面加载起来会慢。追问

恩恩，谢谢，还有一个问题，php怎么设置cookie的保存路径，全站都能用

追答

额，我没做过PHP，一般都是JSP，要回答PHP的话，还要1到2天去看文档。。。

本回答被提问者采纳