【问题标题】:How to include a jsp inside another jsp using javascript如何使用javascript在另一个jsp中包含一个jsp
【发布时间】: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" alt="logout" style="border: none;background-color: transparent;" /> &nbsp;Log out</s:a></span>
    </s:form> 

我试过了:

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

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

【问题讨论】:

  • 那么,你遇到什么错误了吗?
  • 不。我没有收到任何错误。页面未加载
  • 尝试在 javascript 控制台中检查。
  • /ConfirmationPopup.jsp 怎么样??
  • @Baadshah:我也试过了。但没用。

标签: java javascript jquery jsp struts2


【解决方案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>

【讨论】:

【解决方案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) 在初始页面加载时创建&lt;div id='someID'&gt;&lt;/div&gt;

    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。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-08-20
      • 1970-01-01
      • 2021-01-25
      • 2018-01-30
      • 2015-05-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多