如何使用javascript将一个jsp包含在另一个jsp中
How to include a jsp inside another jsp using javascript
我有一个注销按钮。一旦点击注销,我需要显示另一个页面。如何使用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" alt="logout" style="border: none;background-color: transparent;" /> Log out</s:a></span>
</s:form>
我试过这个:
$('#logoutId').click(function(event) {
$('#logoutdiv').load('ConfirmationPopup.jsp');
});
您不能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>
您可以使用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执行操作。。。你确定吗?
//todo表单在这里span/popup/script/css->的html,就像iframe一样看起来你想显示一个确认-某个用户界面问你真的想注销吗?
最好的方法是制作一个id为"logoutConfirmSpan"的空span,然后在单击注销时,执行ajax(异步模式->false,以便内联(获取html标记,并将其设置为span 的innerHTML
html应该是有效的,这样它就可以显示UI并使表单真正注销。
请参阅用Ajax响应替换div的内部HTML告诉如何将Ajax与jQuery一起使用
简单样本:
HTML片段
<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>
您可以使用一个简单的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);
}
});
1( 在初始页面加载时创建
<div id='someID'></div>
2( 单击按钮后,通过javascript使用新的jsp创建一个iframeurl
3( 一旦加载了iframe内容,可能会在对话框中将其显示为弹出窗口窗口
另一种保持跨度的方法是: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就是您想要的。
我强烈建议您使用jQuery
(showcase->div(执行AJAX
调用,但在Struts2
中,您可以在一秒钟内尝试使用已弃用的Dojo
插件,而无需下载任何库,只是为了让您有一个想法。
<%@ 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
必须在SUCCESS上返回要包含的JSP片段。
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 如何将日期id从一个jsp传递到另一个jsp页面
- 一个jsp中有两个操作URL
- 在jsp中,隐藏一个基于其他具有日期选择器的字段的字段
- 如何根据 jsp 中数据库中的值在下拉列表中选择一个值
- 在不重新加载页面的情况下,从JSP(服务器端)b设置一个JavaScript变量
- 如何在jsp页面中包含一个拖放交互UI
- 声明一个js变量,该变量将被我的2个jsp访问
- Dropdown基于jsp Struts中的另一个下拉列表
- 方法以打开Javascript中的另一个jsp页面
- 调用一个不返回任何内容的servlet..加载时从jsp
- 点击jsp页面上的链接打开一个文件
- 使用Onclick将参数从一个jsp页面传递到另一个页面
- 使用PHP和JSP在另一个网页中获取cookie值
- 从javascript调用一个jsp方法
- 如果要使用 JSP 和 Java 脚本删除数据,则需要一个确认框
- 如何将 JS 变量从一个 jsp 页面传递到另一个页面
- 如果在第一个 jsp 页面设置了刷新参数,则会刷新所有 jsp 页面
- 使用 ajax 和 JSP Servlet 根据选择的上一个下拉列表填充下拉列表