请教一个Ajax刷新列表的写法

[chen870201]

有一个功能列表，输出一些值，在其他地方对数据进行增删改后，要求该页面只更新列表里的内容。
现在列表写法如下：

<div id="data_Table">
    <table cellspacing="0">
        <tbody>
            <tr>
                <th>医院名称</th>
                <th>科室</th>
                <th>医生编号</th>
                <th>医生姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${colleagues}" var="colleague">
                <tr>
                    <td>${colleague.companyNm}</td>
                    <td>${colleague.userDep}</td>
                    <td>${colleague.userId}</td>
                    <td>${colleague.userNm}</td>
                    <td>${colleague.userSex}</td>
                    <td>${colleague.userDob}</td>
                    <td><a href="javascript:modify('${colleague.userId}')"
                        title="修改">修改</a>   <a
                        href="javascript:delOne('${colleague.userId}')" title="删除">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>

求教能否在修改、删除后通过ajax请求后台删改方法之后返回colleagues（List）并使列表这部分重新局部加载？

[yanggang832]

我也有这样的问题，帮顶

[shayebuhui0]

为什么不可以。ajax请求后台，返回数据列表，把原有的替换一下就可以了被。

[万笑爽]

你的意思是在其他页面操作删除等，同步这边需要更新页面实时数据对吧； 如果是这样的话，暂时只想到了如下几种； 1.如果不要求实时性太高，你可以定时ajax局部刷新列表显示就行了； 2.你可以用socket 来做，比如apache mina框架等，保持长连接，服务器主动给客户端消息交互，跟聊天软件一样； 3.你可以用dwr来做，dwr 后台推送数据到页面；

[flurriedCat]

将下面的代码单独写到一个list的动态页面中，前台ajax请求后返回这个页面，需要注意响应得是json或freemarker的 data_Table.html = transport.responseText;

    <table cellspacing="0">
        <tbody>
            <tr>
                <th>医院名称</th>
                <th>科室</th>
                <th>医生编号</th>
                <th>医生姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${colleagues}" var="colleague">
                <tr>
                    <td>${colleague.companyNm}</td>
                    <td>${colleague.userDep}</td>
                    <td>${colleague.userId}</td>
                    <td>${colleague.userNm}</td>
                    <td>${colleague.userSex}</td>
                    <td>${colleague.userDob}</td>
                    <td><a href="javascript:modify('${colleague.userId}')"
                        title="修改">修改</a>   <a
                        href="javascript:delOne('${colleague.userId}')" title="删除">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

[wenping4316]

可以的，在后台，你删除后，在查询下数据库，把查询到的所有数据返回，通过JSONLib可以把list集合转变成json字符串，响应到客户端就行了，剩下就看你展示数据了。

[langkebai]

<table cellspacing="0"> <tbody> <tr> <th>医院名称</th> <th>科室</th> <th>医生编号</th> <th>医生姓名</th> <th>性别</th> <th>出生日期</th> <th>操作</th> </tr> <c:forEach items="${colleagues}" var="colleague"> <tr> <td>${colleague.companyNm}</td> <td>${colleague.userDep}</td> <td>${colleague.userId}</td> <td>${colleague.userNm}</td> <td>${colleague.userSex}</td> <td>${colleague.userDob}</td> <td><a href="javascript:modify('${colleague.userId}')" title="修改">修改</a> <a href="javascript:delOne('${colleague.userId}')" title="删除">删除</a> </td> </tr> </c:forEach> </tbody> </table> 把这段代码写成一个页面 请求返回一个页面 。直接替换 $("data_Table").html(msg);

[shenjianox]

删除后查询后台返回json格式的list,然后遍历该json生成tr，然后append到table上 $.each(list.function(key,val){ })

[迷林]

请求的时候就在查询一遍数据取出来放JSON返回页面不就行了，不知道楼主是在那块不懂

[peter_xizi]

3楼正解

[guoguo1010]

不知道楼主找到好的解决办法了吗 同求

[悲鸣秋]

ajax 处理完修改或删除后，重新获取列表，转存为json.传回页面。 页面根据json数据拼接table的html。替换原来位置的table中的数据

[空心兜兜]

列表重新加载，应该没问题的

[一木剑]

引用 10 楼 wi496481 的回复:

请求的时候就在查询一遍数据取出来放JSON返回页面不就行了，不知道楼主是在那块不懂

json传回来后，一定要append到后面吗？可以不字符串拼接吗？

[一木剑]

引用 6 楼 shenjianox 的回复:

删除后查询后台返回json格式的list,然后遍历该json生成tr，然后append到table上 $.each(list.function(key,val){ })

除了append，还有别的方式吗？

[nswyctf]

楼主解决了吗，怎么弄啊？