2013-04-23 253 views
5

我有一个按钮注销。一旦注销被点击,我需要显示另一个页面。我怎样才能使用JavaScript做到这一点?谁能帮帮我吗?如何使用javascript将jsp包含在另一个jsp中

我的代码:

<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;" /> &nbsp;Log out</s:a></span> 
    </s:form> 

我尝试这样做:

$('#logoutId').click(function(event) { 

    $('#logoutdiv').load('ConfirmationPopup.jsp'); 
}); 
+0

那么,你有没有遇到任何错误? – 2013-04-23 07:18:50

+0

没有。我没有得到任何错误。页面没有得到加载 – mukund 2013-04-23 07:19:47

+0

尝试检查在JavaScript控制台。 – 2013-04-23 07:20:15

回答

2

你不能include一个JSP输入反应中对客户端,因为它是一个服务器端技术的点击。您可以在发送之前在页面中包含所需的HTML,使用CSS隐藏该区域,然后使用JavaScript将其显示为可见,以响应使用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> 
+0

我在这里有一个问题...每当我加载包含注销的页面时,我都会收到confirmationpopup.jsp。单击注销时不会显示它。 – mukund 2013-04-23 08:47:54

+0

你能帮我解决吗? – mukund 2013-04-23 10:42:50

3

你可以使用AJAX来从第二JSP在HTML,然后附加到DOM或一个元素的innerHTML。

主要Page.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形式在这里 HTML /弹出/脚本/ CSS - >就像一个iframe

看起来要显示一个确认 - 一些用户界面问你是否真的要退出?最好的方法是创建一个id为“logoutConfirmSpan”的空跨度,然后点击注销,做ajax(异步模式 - > false,所以它发生内联)获取html标记并将其设置为innerHTML的跨度

该html应该是有效的,这样它会使用户界面显示并且形式才能真正注销。

Replace inner HTML of a div with Ajax response告诉你如何使用Ajax与jQuery

简单的例子:

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> 
+0

你可以更清楚一点,或者你可以请我给我举一些例子,因为我没有任何使用ajax的经验 – mukund 2013-04-23 08:26:49

+0

对不起,我没有得到你 – mukund 2013-04-23 08:59:20

+0

建议你去通过stacktrace http://stackoverflow.com/a/14851734/1643558你在问同样的事情 - 看到那里的答案。如果你想在AJAX上找到一些背景,请参阅http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html搜索“HTML片段” – tgkprog 2013-04-23 09:07:43

2

您可以使用一个简单的GET请求获取由次级.jsp页面呈现的HTML 。 基本上,从内阿贾克斯,使用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

1)创建<div id='someID'></div>同时按一下按钮初始页面加载

2),直通JavaScript和你的新的JSP创建一个iframe 网址

3)一旦iframe内容的对话框 窗口中加载显示它作为一个弹出或许

+0

我从来没有使用iframes和所有。你可以多解释一下还是给我举个例子? – mukund 2013-04-23 10:44:07

+0

从这里开始http://www.w3schools.com/tags/tag_iframe.asp – Madhu 2013-04-23 10:50:24

+0

我不需要iframe ...我已经有一个页面了...我需要使用javascript显示该页面...我该怎么做那是因为我们在任何地方都使用相同格式的确认信息,我不需要更改它 – mukund 2013-04-23 10:53:51

0

你可以做到这一点,保持跨度和点击的另一种方法做: 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 > 
+0

但是ajax对于工作流等来说更强大,但这可能是如果只有1个动作就够了 – tgkprog 2013-04-23 11:13:26

0

AJAX是你在找什么。

我强烈建议你用jQueryshowcase -> 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必须返回成功的JSP代码段要包括的。