如何在单击按钮时更新 html/jsp 页面的特定部分？答案

【问题标题】：How to update a specific section of html/jsp page on click of button?如何在单击按钮时更新 html/jsp 页面的特定部分？
【发布时间】：2015-03-08 16:41:18
【问题描述】：

我一直卡在某个点上。我将尝试以简单的方式解释我的问题-
这是我的 jsp 页面 -

这是我的jsp代码 -

    <%@page import="org.w3c.dom.Document"%>
    <%@page import="com.Search.Struts2.DataEnterActionClass"%>
    <%@ page contentType="text/html; charset=UTF-8" %>
    <%@ page import="javax.servlet.http.HttpServletResponse"%>
    <%-- <%@ page import="com.Search.Struts2.AccessCheckComponent"%> --%>
    <jsp:include page="SessionCheckout.jsp"></jsp:include>

    <html>
    <head>
    <%
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
    response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
    response.setDateHeader("Expires", 0); // Proxies.
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
    %>

     <div id="nav" style="width:150px; float:left;">
    <table>
     <% 

          String StrParentObjectName = "";
          StrParentObjectName =  (String) DataEnterActionClass.getDocumentName(strObjectId)  ;           
        String hidingRowL1 = HidingRows(strObjectId, ConnectedData, "L1"); 
        String StrGlobal3dXML = (String) DataEnterActionClass.getFile(strObjectId);      
          %>
                <tr>
         <td width="25px"><b><a style="text-decoration: none;"
            href="javascript:toggle_visibility('tbl1', '<%=strObjectId.toString()%>' ,  '<%=true%>', '<%= hidingRowL1  %>');">
                        <div id="<%=strObjectId + "plus"  %>" name="lnk1">+</div>   </a></b></td>           
                    <td align="left"   style="font-size: 120%;">
 <a onclick="Here i will have to set value for param tag using javascript">
             <%=StrParentObjectName%> </a>  
     </td>    
                    </tr>   
               <% 


                        if(ConnectedData.keySet().contains(strObjectId))
                            {  
                            ArrayList   childList = (ArrayList) ConnectedData.get(strObjectId);
                            Collections.sort(childList);
                            for(int i=0; i<childList.size(); i++)   
                            {       
                        String childObjectId = (String) childList.get(i);
                String hidingRowL2 = HidingRows(childObjectId, MapAll5thLevelChild, "L2");   // 2
                        String prientedData = (String) DataEnterActionClass.getDocumentName(childObjectId)  ;   
                  String RowIdCreationL1 = strObjectId + childObjectId + "L1";   // 1
                 StrGlobal3dXML = (String) DataEnterActionClass.getFile(childObjectId)  ;      
                              %>
                            <tr id="<%= RowIdCreationL1 %>" > 
         <td><b><a style="text-decoration: none;"
            href="javascript:toggle_visibility('tbl1', '<%=childObjectId.toString()%>' ,  '<%=true%>', '<%= hidingRowL2  %>');">
                        <div id="<%=childObjectId + "plus"  %>" name="lnk1">+</div>   </a></b></td>     
                    <td align="left"  height="10" style="font-size: 90%;"> &nbsp;&nbsp; 
 <a onclick="Here i will have to set value for param tag using javascript">   
<%=prientedData%> </a> <sup>1</sup>  </td>
                    </tr>   
                    <script>
            window.onload =  VisibleFalse('<%=RowIdCreationL1%>');
                            </script>   

            <%
                                    }
                                }           
            %>
      </table>

    </div>


    <div id="section" style = "width:800px; height:700px; float:left;" >
    <object type='application/x-3dxmlplugin' id='3DXMLPluginId' style="width: 600px; height: 500px;">
    <!-- <param name='DocumentFile' value='D:\IETM\CheckedInFiles\Model\Compart_Two\watch.3dxml'>
     -->
     <param name='DocumentFile' id="fileId" value= " This i want to change dynamically ">
    </object>
    </div>

    </html>

在这里，我只是使用了两个 div，一个 id='nav'，另一个 id='section'。

如果我单击船超链接（左侧）在图像中，则附有船的 3dxml 图像应显示在右侧。为此，我在船超链接上调用 javascript 并尝试更新参数标记值（如硬编码）和那个 div 'section'。我在 java 'StrGlobal3dXML' 字符串变量中得到这个值。

我尝试了很多方法，比如js，ajax，但都没有成功。

这对我来说非常重要。任何实现这一点或任何建议的方法，提示都会非常有帮助。请尝试用 javascript 或除 jQuery 之外的任何其他方式给出解决方案。我连 jQuery 的 abc 都不知道。

谢谢！！

【问题讨论】：

那么你用js、ajax等尝试了什么？你打算做什么，在哪里失败了？
首先，我使用了 document.write 和我在其中编写的整个对象标记代码。但它是在新窗口中打开而不是更新 div 'section' 标签。我也写了一个javascript，但我不知道如何动态设置param标签的值。
你不能同时生成两个元素并隐藏/显示它们吗？ jsfiddle.net/trx5xbsL
like this - function Print3dXML(StrGlobal3dXML) { document.write("");但它会在新窗口中打开而不是更新现有的一次。
@user3916928，请不要在 cmets 中编写代码。点击您问题下的“编辑”链接，将其添加到您的问题中，不要忘记格式化。

标签： java javascript html jsp

【解决方案1】：

我终于得到了答案。

在 Ajax 中，您可以像这样调用对象标签 -

  <object type='application/x-3dxmlplugin' id='3DXMLPluginId' style="width: 800px; height: 700px; ">
<param name='DocumentFile' value="\\10.60.3.47/IETM_CheckedInFiles/Model/Deck_One/watch.3dxml">
</object>

现在在 TreeView.jsp -

function Print3dXML()
    {
        var xmlhttp;        
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }  

          xmlhttp.open("GET","IETMAjaxCall_getFile.jsp?q=",true);
          xmlhttp.send();        
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {     
             document.getElementById("section").innerHTML = xmlhttp.responseText;
            }
          }

    }

我认为，这可能会满足您的要求。

【讨论】：