Ajax 는 배경 집합 을 프론트 페이지 로 출력 합 니 다.

질문: ajax 로 배경 집합 을 프론트 페이지 로 출력 합 니 다.

1. 인터넷 에서 JSON 을 쓰 는 걸 보 니 조금 귀 찮 은 것 같 아 요.
2. DWR 를 이용 하여 백 스테이지 의 집합 을 추출 하 는 것 은 매우 간단 하 다. 어 려 운 점 은 대량의 데 이 터 를 어떻게 예 쁘 게 출력 하 는 지, 그리고 js 에서 대량의 조합 코드 (집합 데이터 와 html 라벨 의 조합) 를 추출 하 는 것 이 더욱 번 거 롭 고 실수 하기 쉽다 는 것 이다.

해결: jquery 활용
생각:
1. 일반적인 출력 집합 과 같 습 니 다. 먼저 집합 을 한 페이지 에 출력 합 니 다. 이 페이지 는 집합 출력 정보 만 표시 합 니 다.
2. 그리고 jquery 를 이용 하여 이 페이지 를 검색 페이지 에 추가 합 니 다.

다음 글 에 나타 난 몇 페이지:
1.employee_info. jsp, 검색 페이지, 드 롭 다운 목록 검색 및 아래 부분 으로 직원 정보 표시 (ajax)
2. employee Info. jsp 출력 집합 을 불 러 옵 니 다. 이 페이지 의 ajax 는 employee 에 추 가 됩 니 다.info. jsp 의 id 가 results 인 DIV 에서
3. 기술 사용 struts 2

설명:
사실 어떤 기술 을 쓰 고 백 스테이지 로 집합 하 든 똑 같 아 요. 요청 한 자원 만 고치 면 돼 요.

코드:

1. 우리 검색 페이지 employeeinfo.jsp

		<table>
			<tr>
				<td>
					         ：
				</td>
				<td>
				<!--         ,             -->
					<select name="employee.department.departmentId"
						onchange="getDepar(this.value)">
						<c:forEach items="${departmentList}" var="department">
							<option value="${department.departmentId}">
								${department.departmentName}
							</option>
						</c:forEach>
					</select>
				</td>
				<td>
				</td>
			</tr>
		</table>
		<!--       DIV-->
		<div id="results">
		</div>

2. js 함수 페이지

	function getDepar(id) {
		//           
		$("#results").html(""); 
		$.ajax( {
			//     ,   struts2,      html   
			url : "employeeAction_getByDep.action?departmentId=" + id,
			cache : false,
			success : function(html) {
			//        id results DIV
				$("#results").append(html);
		}
		});
	}

3. 백 스테이지 직원 집합 처리

	public String getByDep() {
		//           
		employeeList = employeeService.getByDepartment(departmentId);
		//          ,   employeeInfo.jsp employee_info.jsp      
		resultLocation = "employeeInfo.jsp";
		return "goto";
	}

4. 집합 표시 페이지 employee Info. jsp (employee info. jsp 와 같은 페이지 가 아 닙 니 다)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>                 ,        ,              (   DIV)   </title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
	</head>
	<body>
		<c:if test="${empty requestScope.employeeList}">       </c:if>
		<c:if test="${requestScope.employeeList ne null}">
			<table>
				<tr>
					<td>
						   
					</td>
					<td>
						  
					</td>
					<td>
						  
					</td>
					<td>
						    
					</td>
					<td>
						  
					</td>
				</tr>
				<c:forEach items="${requestScope.employeeList}" var="employee">
					<tr>
						<td>
							${employee.employeeLoginName }
						</td>
						<td>
							${employee.employeeName }
						</td>
						<td>
							${employee.roler.rolerName }
						</td>
						<td>
							${employee.department.departmentName }
						</td>
						<td>
							${employee.employeeState.employeeStateName }
						</td>
					</tr>
				</c:forEach>
			</table>
		</c:if>
	</body>
</html>

증가:

지금까지 기본적으로 기능 을 완성 할 수 있 었 지만 작은 BUG 가 있 었 습 니 다. 검색 페이지 (employee info. jsp) 를 처음 방 문 했 을 때 데이터 가 표시 되 지 않 았 습 니 다. 우호 성 을 높이 기 위해 employee Info. jsp 에 표 시 된 데 이 터 를 employee 로 복사 하 였 습 니 다.info. jsp 페이지 의 id = "results" DIVd 중 하나

5. 검색 페이지 를 처음 방문 할 때 첫 번 째 부서 의 직원 도 알 아 낼 것 입 니 다.

public String loadDep() {
		departmentList = departmentService.getAll();
		employeeList = employeeService.getByDepartment(1);//     id 1   ,                  ide 1 
		department = new Department(1);
		resultLocation = "employee_info.jsp";
		return "goto";
	}

6.employee_info. jsp 코드 추가

<!--       DIV-->
		<div id="results">
			<!-- div                  ,                           -->
			<c:if test="${empty requestScope.employeeList}">       </c:if>
			<c:if test="${requestScope.employeeList ne null}">
				<table>
					<tr>
						<td>
							   
						</td>
						<td>
							  
						</td>
						<td>
							  
						</td>
						<td>
							    
						</td>
						<td>
							  
						</td>
					</tr>
					<c:forEach items="${requestScope.employeeList}" var="employee">
						<tr>
							<td>
								${employee.employeeLoginName }
							</td>
							<td>
								${employee.employeeName }
							</td>
							<td>
								${employee.roler.rolerName }
							</td>
							<td>
								${employee.department.departmentName }
							</td>
							<td>
								${employee.employeeState.employeeStateName }
							</td>
						</tr>
					</c:forEach>
				</table>
			</c:if>
		</div>

이렇게 하면 된다.

전재 출처 를 밝 혀 주 십시오: http://noblebaron.iteye.com/blog/1632229

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Bootstrap DateTimepicker 예제

이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다. 부...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Ajax 는 배경 집합 을 프론트 페이지 로 출력 합 니 다.

좋은 웹페이지 즐겨찾기