jsp table的局部刷新

Posted 2023-04-12

jsp动态生成一个table表格，ajax或forme如何实现表单的局部刷新哇，请各位大神给点实列。或者别的方法也行，刚刚开始学习，请大家帮帮忙

实现局部刷新其实非常简单，看你需要哪种局部，单行、多行、单列、多列，而无需考虑。

单行和单列只需要给tr或者td标签添加id，通过id获取对象更新text属性即可，多行有四种种方式：

 

给要更新的这些行添加相同的name，通过name批量给这些行删除td并重新添加td，更改新数据

 

将要更新的行用div或分块的标签括起来，清空div重新创建这些tr及里面的td，重新填充数据

 

全部更改，将除了列名之外的其他tr置于<tbody>标签中，刷新时清空tbody并重新创建tr及td，填充新数据。

 

全部更改，将列名列定义在th标签中，数据行都是tr，批量获取tr并更新tr中的td即可

 

又不给钱，没空列这么多代码

参考技术A ajax向服务器发送请求,并使用回调函数获取服务器返回的数据,可利用js或jquery将数据整理并将表单元素重构以显示处理后的数据,即可达到你要的局部刷新效果!追问

能给个实列吗，初学者，思路是有了，但操作起来还是有问题。谢谢了

追答

现在上班，太忙了，不好意思哦，你上网多找找吧，不难的，祝你好运咯！

参考技术B function test()
jsonSend("$ctx/mmessage/selectSs",bm:($ksbmxx.GZDWSZS+""),function(xjds)
var str="<option type='text' value=''>请选择</option>";
if(xjds!=null && 0!=xjds.length)
for(var i=0;i<xjds.length;i++)
if(""!=$ksbmxx.GZDWSZSH+"" && xjds[i].BM == $ksbmxx.GZDWSZSH+"")
str+="<option type='text' value='"+xjds[i].BM+"' selected='selected'>"+xjds[i].MC+"</option>";
else
str+="<option type='text' value='"+xjds[i].BM+"'>"+xjds[i].MC+"</option>";



$("#gzdwszsh").html(str);
);

这段js是没有问题的 你按照自己的需求改一下就可以了。
望采纳本回答被提问者采纳 参考技术C jsp中的table局部刷新就通过ajax异步刷新数据数显的。
jsp中ajax的写法：
function update ()
$.ajax(function()
method:"post",
url:"DeleteAction",
data:xxxxx,
success: function(return)
$("#tabelData").html(return);

);


jsp中table：

<table>
<tr>
<td>第一行</td>
<td><a onclick="updata()">更新</a></td>
</tr>
<table>
实现过程：点击表格的某一行数据，就触发更新动作，执行update方法。
update中调用ajax接口去后台取数据并刷新之前的记录。 参考技术D 网上有很多ajax的例子哇 找一个下几个JAR包 试试就出来了。

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