Ajax+div 의'왼쪽 메뉴,오른쪽 내용'페이지 효과 구현
① 기본 페이지(index.jsp):
②:왼쪽 사용자 관리 탭 에 있 는 사용자 목록 옵션 을 클릭 하면 오른쪽 기본 페이지 내용 이 사용자 목록 페이지(userList.jsp)로 업 데 이 트 됩 니 다.
③:마찬가지 로 제품 관리,주문 관리 라벨 에 있 는 제품 목록,주문 목록 을 클릭 하면 오른쪽 내용 이 제품 목록 페이지(produtList.jsp),주문 목록 페이지(recordList.jsp)의 내용 으로 갱 신 됩 니 다.
이렇게 Ajax+div 를 사용 하여 왼쪽 메뉴 선택,오른쪽 내용 표시 효 과 를 실 현 했 습 니 다.구체 적 인 실현 과정 을 살 펴 보 겠 습 니 다.
하나:
전체 프 리 젠 테 이 션 에 사용 되 는 예제 프로그램 은 기본 페이지(index.jsp),사용자 목록 페이지(userList.jsp),제품 목록 페이지(produtList.jsp),주문 관리 페이지(recordList.jsp)를 포함 합 니 다.
Bootstrap프레임 워 크 와FontAwesome아이콘 을 사 용 했 습 니 다.(어 쩔 수 없습니다.boottstrap 이 가지 고 있 는 아이콘 이 너무 적 습 니 다.o(s□t)o)이 두 물건 의 사용 방법 은 홈 페이지 를 참조 하 십시오.모두 간단 합 니 다.
먼저 index.jsp 의 코드 를 보 세 요.저 는 기본적으로 상세 하 게 설명 을 했 습 니 다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <%-- IE --%>
<meta name="viewport" content="width=device-width, initial-scale=1"> <%-- --%>
<meta name="Author" content="Dreamer-1.">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index.css"> <!-- Bootstrap Demon， CSS -->
<link rel="stylesheet" href="css/font-change.css"> <!-- （ ， ） -->
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>- -</title>
</head>
<body>
<!-- （ bootstrap Demon）==================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.jsp">XXXX.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="###" onclick="showAtRight('userList.jsp')"><i class="fa fa-users"></i> </a></li>
<li><a href="###" onclick="showAtRight('productList.jsp')"><i class="fa fa-list-alt"></i> </a></li>
<li><a href="###" onclick="showAtRight('recordList.jsp')" ><i class="fa fa-list"></i> </a></li>
</ul>
</div>
</div>
</nav>
<!-- ========================================= -->
<div class="container-fluid">
<div class="row-fluie">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<!-- -->
<li class="active"><a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-user"></i> <span class="sr-only">(current)</span></a>
</li>
<!-- -->
<!-- <a> href="#……" <ul> id="……" -->
<ul id="userMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('userList.jsp')"><i class="fa fa-users"></i> </a></li>
</ul>
<li><a href="#productMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-globe"></i> <span class="sr-only">(current)</span></a>
</li>
<ul id="productMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('productList.jsp')"><i class="fa fa-list-alt"></i> </a></li>
</ul>
<li><a href="#recordMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-file-text"></i> <span class="sr-only">(current)</span></a>
</li>
<ul id="recordMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('recordList.jsp')" ><i class="fa fa-list"></i> </a></li>
</ul>
</ul>
</div>
</div>
</div>
<!-- ================================================== -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header"><i class="fa fa-cog fa-spin"></i> <small> XXX </small></h1>
<!-- jsp（ html ） -->
<div id="content">
<h4>
<strong> ：</strong><br>
<br><br> ……
</h4>
</div>
</div>
<script type="text/javascript">
/*
* active ， active active
* （ ）
*/
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
//e.preventDefault(); <a>
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
/*
* ajax javascript ：
* xmlHttp.responseText ， AJAX HTML ， eval
*/
function executeScript(html)
{
var reg = /<script[^>]*>([^\x00]+)$/i;
// HTML <\/script>
var htmlBlock = html.split("<\/script>");
for (var i in htmlBlock)
{
var blocks;// ，blocks[1] ， reg
if (blocks = htmlBlock[i].match(reg))
{
// ， --> ，eval
var code = blocks[1].replace(/<!--/, '');
try
{
eval(code) //
}
catch (e)
{
}
}
}
}
/*
* div （ id="content" div ）
* ：
* ①：js ， ， ；
* ②： css， （ index.jsp）
* （ include， css js 。 js。 js ）
*/
function showAtRight(url) {
var xmlHttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest(); // XMLHttpRequest
}
else {
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function() {
//onreadystatechange ― readystate
if (xmlHttp.readyState == 4) {
//xmlHttp.readyState == 4 ―― finished downloading response
if (xmlHttp.status == 200) {
//xmlHttp.status == 200 ――
document.getElementById("content").innerHTML=xmlHttp.responseText; // id="content" div
executeScript(xmlHttp.responseText); // JavaScript
}
//
else if (xmlHttp.status == 404){
alert(" ☹ （ ：404 Not Found），……！");
/* 404 */
return;
}
else if (xmlHttp.status == 403) {
alert(" ☹ （ ：403 Forbidden），……");
/* 403 */
return;
}
else {
alert(" ☹ （ ：" + request.status + "），……");
/* */
return;
}
}
}
// （url ）
xmlHttp.open("GET", url, true); //true
xmlHttp.send();
}
</script>
</body>
</html>FontAwesomt 아이콘 이 올 바 르 게 표시 되 지 않 으 면 font-awesom.css 의 글꼴 파일 주소 가 잘못 되 었 을 수 있 습 니 다.
오른쪽 빨간색 상자 안의 url 이 왼쪽 빨간색 상자 안의 fonts-awesome 파일 의 경로 에 대응 하 는 지 확인 하 십시오.
둘:
userList.jsp 페이지 코드:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
(っ´Ι`)っ
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
t(￣￣)q
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<(￣ˇ￣)/
</div>
</body>
</html>3.원본 다운로드
http://files.cnblogs.com/files/Dreamer-1/AjaxExample.rar
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Ajax+div 기반 의'왼쪽 메뉴,오른쪽 콘 텐 츠'페이지 효과 가 실현 되 었 습 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
