單擊鏈接時，在同一jsp上異步在div中包括jsp

Question

我正在嘗試實現用戶帳戶頁面。 在頁面中，當我單擊左側的鏈接時，例如“搜索用戶”，“准備筆記”等。我想在右側的div中包括相關的jsp頁面，如下所示。

在此處輸入圖片說明

我先使用iframe代替了div，但是我可以將會話對象屬性傳遞給iframe中加載的頁面，因為iframe發送單獨的http請求。

我想在右div而不是iframe中使用jsp：include顯示各個jsp頁面。 新的目標div與iframe相同。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">

<script src="${pageContext.request.contextPath}/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<style>
 #dashboard-iframe{
    border: 1px solid gray;
    height: 200px;
    width: 200px;
    }
</style>
<script type="text/javascript">


//jquery function i tried   
(document).ready(function() {
    $("#searchUser").click(function(){

        $("#dashboard-iframe").load("${pageContext.request.contextPath}/searchuser");

    });
});

//plain javascript
function searchClick(){
    document.getElementById('dashboard-iframe').innerHTML=
        "<jsp:include page="${pageContext.request.contextPath}/searchuser">";
}



</script>
</head>
<body onload="hidedisplay()">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="list-group pull-left">
                <a id="searchUser" onclick="searchClick()" href="#" class="list-group-item" target="dashboard-iframe">
                    <span class="glyphicon glyphicon-search"></span> Search Users
                </a>
                <a href="${pageContext.request.contextPath}/message_board" target="dashboard-iframe" class="list-group-item">
                    <span class="glyphicon glyphicon-inbox"></span> Message Board
                </a>
                <a href="${pageContext.request.contextPath}/prepare_notes" class="list-group-item" target="dashboard-iframe">
                    <span class="glyphicon glyphicon-list-alt"></span> Prepare Notes
                </a>
                <a href="${pageContext.request.contextPath}/UploadYourFile" target="dashboard-iframe" class="list-group-item">
                    <span class="glyphicon glyphicon-upload"></span> Share File
                </a>
                <a href="${pageContext.request.contextPath}/ComposeMessage" target="dashboard-iframe" class="list-group-item">
                    <span class="glyphicon glyphicon-envelope"></span> Compose Message
                </a>
                <a href="${pageContext.request.contextPath}/edit-profile" target="dashboard-iframe" class="list-group-item">
                    <span class="glyphicon glyphicon-pencil"></span> Edit Profile
                </a>
                <a href="${pageContext.request.contextPath}/connected-users" target="dashboard-iframe" class="list-group-item">
                    <span class="glyphicon glyphicon-link"></span> Connected Users
                </a>

            </div><!-- list-group end -->
        </div>
    </div>

    <div id="dashboard-iframe">
        <!-- Where i want to display the pages -->
    </div>
</body>
</html>

我已經嘗試了一些jquery以及普通的javascript，但無法正常工作。 我很快就需要解決方案了。 請幫忙。

Answer 1

你可以寫：

function searchClick(){
    $('#dashboard-iframe').load('/searchuser');
}

.load（）從服務器加載數據，並將返回的HTML放入匹配的元素中。

Answer 2

首先，我在您的代碼中看不到任何iframe代碼。 HTML應該包含一個iframe例如：

<div id="dashboard-iframe">
   <iframe></iframe>
</div>

然后您的JS代碼應顯示為：

$("#searchUser").click(function(){    
   $("#dashboard-iframe > iframe").attr("src", "${pageContext.request.contextPath}/searchuser");    
});

單擊鏈接時，在同一jsp上異步在div中包括jsp

問題描述

2 個解決方案

解決方案1
1 已采納 2015-03-16 05:18:44

解決方案2
1 2015-03-16 06:29:45

單擊鏈接時，在同一jsp上異步在div中包括jsp

問題描述

2 個解決方案

解決方案1 1 已采納 2015-03-16 05:18:44

解決方案2 1 2015-03-16 06:29:45

解決方案1
1 已采納 2015-03-16 05:18:44

解決方案2
1 2015-03-16 06:29:45