显示单击行的详细信息以及使用ajax在同一jsp中从数据库中获取的详细信息

时间:2018-04-25 07:32:25

标签: javascript java ajax jsp

我是java和jsp的新手。我有一个jsp显示从表中的数据库中获取的数据,我想在同一个jsp中显示每行的详细信息。任何人都可以帮忙做这件事。

这是我的jsp代码

<div class="release">
    <table>
        <% for (BuildStreamBean res : nm_release) { %>
            <tr  bgcolor=#ffffff>
                <td id="release" style="cursor: pointer" onclick="getrelease(this, <%=res.getId_release()%>);">
                    <c:out value="<%=res.getNm_release()%>" />
                </td>
            </tr>
        <% } %>
     </table>                            
 </div>

我的servlet代码是

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    List<BuildStreamDetailsBean> buildStreamDet = new ArrayList<BuildStreamDetailsBean>();
    buildStreamDet = BuildStreamDAO.getBuildDetails(request.getParameter("id_release"), buildStreamDet);

    List<BuildStreamDDBean> buildStreamTp = new ArrayList<BuildStreamDDBean>();
    buildStreamTp = BuildStreamDAO.getBuildStreamTp(build_stream_tp);

    request.setAttribute("build_stream_det", buildStreamDet);
    request.setAttribute("build_stream_tp", buildStreamTp);
    RequestDispatcher view = request.getRequestDispatcher("buildStream.jsp");

    view.forward(request, response);
}

我试图找到解决方案并发现我必须使用ajax函数但不确定如何从servlet返回对jsp的响应并在文本框中显示它们。 在这里,我从数据库中获取行的详细信息。

1 个答案:

答案 0 :(得分:0)

由于您希望在同一页面中显示详细信息,因此最佳选择是使用 Ajax

您可以尝试如下:

<div class="release">
    <table>
        <%for (BuildStreamBean res : nm_release) {%>
        <tr  bgcolor=#ffffff>
            <td id="release" style="cursor: pointer"
                onclick="getrelease('<%=res.getId_release()%>');" onkeyup="">
                    <c:out  value="<%=res.getNm_release()%>"/>
                    <div id="<%=res.getId_release()%>"></div>
                </td>
        </tr><%}%>
    </table>                            
</div>

使js函数getrelease()如下:

function getrelease(releaseId){
  $.ajax({
    url:"yourURL",
    type:"post",
    data:{
       id_release:id_release
    },
    success:function(data){
       $("#"+releaseId).html(data);
    }
  });
}