使用AJAX的Java JSTL填入表中的数据填入、数据、AJAX、Java

2023-09-11 22:29:22 作者:听灵魂诉说,

我实现在Spring框架在Java EE Web客户端。它从在一个表的格式的web服务和显示记录的数据。此表上,即时通讯能够删除多个记录通过选择复选框。

currenty即时刷新使用元刷新表中的记录。原因是因为JavaScript定时刷新将带来页面顶部。它影响时,他/她正在查看记录的用户体验。

在要删除的用户选择记录,然后点击删除,一个JavaScript确认对话框弹出。使用元刷新的问题是,我不是能阻止刷新的确认对话框弹出时。我尝试jQuery的,但它没有工作。

实现Ajax检索表中记录的即时通讯思想。但如何有效地实现它。在表中的记录是动态的。

要进一步增加,我有多个HTML表格。例如,

  #table 1
<表>< TR>< TD>< / TD> ...< / TR>< /表>

#table 2
<表>< TR>< TD>< / TD> ...< / TR>< /表>

#table 3
<表>< TR>< TD>< / TD> ...< / TR>< /表>
 
Win10夜间模式存Bug 教你如何解决

解决方案

我建议你使用JSP作为模板。这意味着,JSP主体包含静态元素如HTML code中的形式表,同时使用标记库插入动态数据,在你的情况下,从数据库中记录的数据。

  c为C:的forEach项目=$ {listOfRecords}VAR =项>
    <表>
        &其中; TR>
            < TD>
                c为C:超时值=$ {}项/>
            < / TD>
        < / TR>
    < /表>
< / C:的forEach>
 

然后使用servlet可以在响应到客户端发送此和AJAX将接收响应,并添加HTML以当前表。在下面的AJAX的code段发送一个请求到位于/为approot / myservlet servlet的数据(的recordId =+ ID)。当servlet接收它检索请求中的记录ID的请求,从数据库中删除记录,获取任何新的记录上次查询添加,通过一个请求分发,包含新的HTML表格传递新的记录到JSP数据生成并发送作为响应返回给浏览器。在成功属性的JavaScript启动并包含在msg变量的响应被添加到当前的表。

  $。阿贾克斯({
   类型:后,
   网址:/为approot / myservlet
   数据:的recordId =+的id,
   成功:函数(MSG){$('#表1)追加(MSG)。
});
 

这是我所想象的是您的解决方案只是一个简要概述。您可能会发现由步指南我写的关于如何建立一个使用Web服务的J2EE应用程序,JSP,Servlet的,标记库和AJAX。

i implemented a java ee webclient in spring framework. it reads data from a webservice and display records in a table format. on this table, im able to a delete multiple record by selecting the checkbox.

currenty im refreshing the table records using meta refresh. reason is because javascript timer refresh will bring the page to top. it affects the user experience when he/she is viewing record.

when a user select records to be deleted and click delete, a javascript confirm dialog box popup. the problem with using meta refresh is im not able to stop the refresh when the confirm dialog box popup. i tried jquery but it didnt work.

im thinking of implementing ajax to retrieve the records for the table. but how can i implement it efficiently. the records in the table are dynamic.

to add further, i have multiple html tables. for example,

#table 1
<table><tr><td></td>....</tr></table>

#table 2
<table><tr><td></td>....</tr></table>

#table 3
<table><tr><td></td>....</tr></table>

解决方案

I suggest that you use a JSP as a template. This means that the body of the JSP contains static elements such as HTML code the forms the table while using tag libs to insert the dynamic data, in your case the data from the database record.

<c:forEach items="${listOfRecords}" var="item">
    <table> 
        <tr>
            <td>    
                <c:out value="${item}"/>
            </td>   
        </tr>       
    </table>
</c:forEach>

Then using a servlet you can send this in the response to the client and AJAX will receive the response and append the HTML to the current table. In the code snippet below AJAX sends the data ("recordid="+id) in a request to the servlet located at /approot/myservlet. When the servlet receives the request it retrieves the record id from the request, deletes the record from the database, retrieves any new records add since the last query, passes the new records to the JSP via a request dispatcher, the HTML table containing the new data is generated and sent as a response back to the browser. The javascript in the success attribute is launched and the response which is contained in the msg variable is appended to the current table.

$.ajax({
   type: "post",
   url: "/approot/myservlet", 
   data: "recordid="+id,
   success: function(msg){ $('#table1').append(msg);
}); 

This is just a quick overview of what I imagine is your solution. You might find the step by step guide I wrote about how to set up a J2EE application using a web service, JSP, Servlet, tag libs and AJAX.