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

7465 단어 jqueryAjax수색 하 다.집합 출력 프론트
질문: 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
전단 ajax 해석
stringstream 데이터 형식 간 변환 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage