单击链接时如何将另一个 JSP 页面注入到 <div> 中？答案

【问题标题】：How do I inject another JSP page into a <div> when clicking a link?单击链接时如何将另一个 JSP 页面注入到 <div> 中？
【发布时间】：2012-09-02 08:48:18
【问题描述】：

我在一个 JSP 页面中有两个不同的部分。一个包含一个链接菜单，当单击 div2 (id-content) 时会相应地加载不同的页面。我正在做类似的事情 -

<div id="menu">
<ul class="navbar">
  <li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
   </li></div>

在脚本中我有一些东西 -

<script language="JavaScript">
function changeContent() {
    document.getElementById('content').load('Login.jsp');
}
</script>

我也试过了-

document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">";

这些方法都不起作用。请建议我应该怎么做

【问题讨论】：

document.getElementById('content').load() 不会做任何事情。如果您尝试异步加载内容，则需要使用 AJAX 方法（或 jQuery 或其他带有快捷方法的专业库/框架）。最后一个“方法”可能不起作用，因为它包含双引号属性，没有在服务器端解析，或者诸如此类。这可能有效，但可能不是您显示的方式（例如，将登录标记放在body 中，然后然后在点击时显示）。

标签： java javascript jsp

【解决方案1】：

试试 jquery..

function changeContent() {
    $('#content').load('Login.jsp');
}

【讨论】：

【解决方案2】：

我们使用 jquery。将 click 事件处理程序添加到锚元素。在点击处理程序中调用$('#content').load(your_url);。您可能想要使用load(url, function() { ...}) 版本。更多信息在这里http://api.jquery.com/load/

【讨论】：

【解决方案3】：

解决方案是使用 Ajax，它会异步检索可以使用 innerHTML 方法粘贴的页面内容。有关 Ajax 调用如何工作的类似问题以及一些介绍性链接，请参见 my answer。

至于为什么您的答案中的示例不起作用，在第一种情况下， Element 对象上没有 load() 方法（除非您自己定义了一个并且没有显示它）。在第二个示例中，正如问题 cmets 所说的那样，可能存在导致 javascript 语法错误的原因。

作为仅供参考，当网页中的某些 javascript 存在语法错误时，当前正在解析的表达式和块的其余部分将被忽略。由于这是在函数声明中，因此该函数永远不会被定义。例如，包含页面中的嵌入引号将结束 innerHTML 分配的字符串。然后 javascript 解析器将尝试解析 HTML 的其余部分，从而导致语法错误，因为 HTML 将不是有效的 javascript。

【讨论】：

【解决方案4】：

您的初始页面来自服务器。它由浏览器显示。当您单击浏览器中的链接（或按钮）时，您希望用新的 HTML 填充第二个 div。这是 AJAX 请求的完美工作。浏览器中的 AJAX 对象所做的是将 POST（或其他）字符串发送到服务器。然后 Ajax 对象从服务器接收 HTML 响应。然后你可以在任何你想要的地方显示 AJAX 对象包含的响应数据。

【讨论】：