如何使用javascript在另一个jsp中包含一个jsp
Posted
技术标签:
【中文标题】如何使用javascript在另一个jsp中包含一个jsp【英文标题】：How to include a jsp inside another jsp using javascript 【发布时间】：2013-04-16 06:15:03 【问题描述】：我有一个注销按钮。单击注销后，我需要显示另一个页面。如何使用 javascript 做到这一点？谁能帮帮我？
我的代码：
<s:form name="LogoutAction"
id="LogoutAction" action="logout">
<span class="inlayField2">
<s:a href="logout" cssClass="planTabHeader" id="logoutId"> <img src="../../KY/images/common/header/lock.png" style="border: none;background-color: transparent;" /> Log out</s:a></span>
</s:form>
我试过了：
$('#logoutId').click(function(event)
$('#logoutdiv').load('ConfirmationPopup.jsp');
);
【问题讨论】：
那么，你遇到什么错误了吗？ 不。我没有收到任何错误。页面未加载 尝试在 javascript 控制台中检查。 /ConfirmationPopup.jsp 怎么样？？ @Baadshah：我也试过了。但没用。 【参考方案1】：您不能include 一个JSP 来响应客户端的点击，因为它是一种服务器端技术。您可以在页面发送之前在页面中包含所需的 html，使用 CSS 隐藏该区域，然后使用 JavaScript 使其可见以响应鼠标单击。include 在页面发送到之前已经在服务器上发生客户端。你可以有这样的东西：
<div id="confirmPopup" style="display:hidden;">
<%@ include file="ConfirmationPopup.jsp" %>
</div>
<script>
$('#logoutId').click(function(event)
document.getElementById("confirmPopup").style.display="block";
);
</script>
【讨论】：
我这里有问题...每次加载包含注销的页面时，我都会收到确认popup.jsp。单击注销时它不显示。 你能帮我解决这个问题吗？【参考方案2】：您可以使用 ajax 从第二个 jsp 获取 html，然后附加到 DOM 或元素的 innerHTML。
主页.jsp
<span id=confirmSpan></span>
<script language="Javascript">
function xmlhttpPost(strURL, queryStr)
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari, opera etc
if (window.XMLHttpRequest)
self.xmlHttpReq = new XMLHttpRequest();
// IE
else if (window.ActiveXObject)
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
else
alert("no ajax")
return
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function()
if (self.xmlHttpReq.readyState == 4)
updatepageConfirm(self.xmlHttpReq.responseText);
self.xmlHttpReq.send(queryStr);
function updatepageConfirm(str)
document.getElementById("confirmSpan").innerHTML = str;
function logout1()
xmlhttpPost("confirm.html");//http://sel2in.com/pages/prog/html/ajax/confirm.html", "")
</script>
</head>
<body>
<form id="search" action="/search" method="get">
<input type=button onclick=logout1() value=logout>
</form >
带有确认代码的示例页面 -> div 的任何有效 html 都可以是 confirm.jsp 采取行动……你确定吗？
//这里的待办事项表格 span/popup/script/css 的 html -> 就像 iframe您似乎想要显示确认信息 - 一些 UI 询问您是否真的要退出？
最好的方法是创建一个 ID 为“logoutConfirmSpan”的空跨度，然后单击注销，执行 ajax（异步模式 -> false，因此它内联发生）获取 html 标记并将其设置为跨度
html 应该是有效的，这样它才能显示 UI 和真正注销的表单。
见Replace inner HTML of a div with Ajax response告诉你如何在jQuery中使用ajax
简单示例：
HTML snippets
<span id = 'logoutConfirmSpan'> </span>
<script>
// call ajax, with the response call setHtmlForConfirm
function setHtmlForConfirm(req)
document.getElementById('logoutConfirmSpan').innerHTML = req.responseText;
//req.responseText should have the html to show the confirm UI and form to submit yes/ no
</script>
【讨论】：
你能说得清楚一点吗，或者你能给我举个例子，因为我没有任何 ajax 经验 建议您通过堆栈跟踪 ***.com/a/14851734/1643558 您在问同样的事情 - 在那里查看答案。如果你想了解 ajax 的背景知识，请参阅 quirksmode.org/blog/archives/2005/12/the_ajax_respon.html 搜索“HTML sn-ps” 不使用ajax有什么办法吗？ 但是 wat 是 req.responseText 通过quirksmode.org/blog/archives/2005/12/the_ajax_respon.html 它包含所有代码或查看sel2in.com/pages/prog/html/ajax/aPage.html --> updatepageConfirm(self.xmlHttpReq.responseText);【参考方案3】：您可以使用简单的GET 请求来获取辅助.jsp 页面呈现的HTML。
基本上，在 Ajax 中，您可以使用 jQuery：
$.get(
url: "mysite.com/otherpage.jsp",
data: "some data you want to send, optional",
success: function(data, textStatus, jqXhr)//the response data, the ajax request status and the ajax request object itself
$('#someDiv').html(data);
);
【讨论】：
【参考方案4】：1) 在初始页面加载时创建
<div id='someID'></div>2) 在按钮单击时，通过 javascript 使用您的新 jsp 创建一个 iframe 网址
3) 加载 iframe 内容后，可能会在对话框中将其显示为弹出窗口 窗口
【讨论】：
我从未使用过 iframe 等。能否请您多解释一下或给我举个例子？ 我不需要 iframe...我已经有一个页面...我需要使用 javascript 显示该页面...我该怎么做...因为我们使用相同的确认格式到处都是消息，我不需要更改它 是的，它确实这样做了......但在这种情况下，每当页面加载时我都会收到弹出窗口，而不是在单击注销时。 把这个块 $('#logoutId').click(function(event) document.getElementById("confirmPopup").style.display="block"; );在函数内部并在单击注销时调用该函数 我试过这个：ifrm = document.createElement("IFRAME"); ifrm.setAttribute("src", "/WebContent/planmanagement/planSummary/ConfirmationPopup.jsp"); ifrm.style.width = 640+“像素”； ifrm.style.height = 480+"px"; document.getElementById("confirmPopup").innerHTML = ifrm;【参考方案5】：另一种方法可以保持跨度并点击执行： http://sel2in.com/pages/prog/html/ajax/aPage2.html1
<span id=confirmSpan></span>
<script language="Javascript">
function logout1()
iconfirmSpan = document.getElementById("confirmSpan")
if (!confirmSpan)
alert("Error no confirmSpan contact support!");
confirmSpan.innerHTML = "<iframe src=\"http://sel2in.com/pages/prog/html/ajax/confirm.html\" height=400 width=700></iframe>"
//in real can keep height 1 width 1 and location off page if you want it just to load elements, scripts etc
</script>
</head>
<body>
<form id="search" action="/search" method="get">
<input type=button onclick=logout1() value="Do Action">
</form >
【讨论】：
但是 ajax 对于工作流等来说更强大，但如果只有 1 个操作就足够了【参考方案6】：AJAX 是您正在寻找的。
我强烈建议您使用 jQuery (showcase -> div) 执行 AJAX 调用，但在 Struts2 中，您可以尝试使用 已弃用 @987654325 @plugin 一秒搞定，无需下载任何库，只为给你一个思路。
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<head>
<sx:head/>
<script>
function loadAjax()
var div = dojo.widget.byId("myDiv");
div.href = "yourAjaxAction.action";
div.refresh();
</script>
</head>
<body>
<input type="button"
value="Include a JSP fragment dynamically"
onclick="loadAjax();"/>
<sx:div id="myDiv"> </sx:div>
</body>
然后，您的yourAjaxAction.action 必须成功返回您想要包含的 JSP sn-p。
【讨论】：
以上是关于如何使用javascript在另一个jsp中包含一个jsp的主要内容，如果未能解决你的问题，请参考以下文章
如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？
如何在播放框架模板的 html 标记中包含一段 java 代码？