jquery의 ajax를 사용하여 2단계 대화형 menu_javascript 기술 구현

메뉴 리소스는 데이터베이스에 저장됩니다. jquery의 ajax 구현을 사용합니다. 사용된 패키지는 다음과 같습니다: json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js

JSP 페이지 코드:

코드 복사 코드는 다음과 같습니다.

<%@ page contentType="text/html; charset= gbk "%>
<%@ taglib prefix="s" uri="/struts-tags"%>


<% String basePath = request.getScheme( ) "://" request.getServerName() ":" request.getServerPort() request.getContextPath() "/"
out.println(basePath)

< ;script type="text/javascript">
jQuery(function($){
//alert("ok");
}); 🎜 >$.ajax({
url : "<%=basePath%>cateJson.whbs",
data : {parentId : oneId}, // 매개변수
type : "post",
cache: false,
dataType: "json", //json 데이터 반환
error: function(){
alert('error')
},
success:onchangecallback
});
}
function onchangecallback(data){
document.all['twoId'].options.length = 0; //원래 옵션 지우기
var str=" ";
for(var i=0;istr ="" data[i]. 제목 ""
}
$("#twoId").html(str)

부서 유형을 선택하세요


파일 형식을 선택하세요
< ;s:select list="rftwos" listKey="recordId" listValue="title" name="twoId" theme="simple" id="twoId" value="twoID">

Struts의 동작 코드

코드 복사
코드는 다음과 같습니다.

/*** des: 보조 링크 메뉴 가져오기 * autho:exceljava * 날짜: 2009년 11월 20일 * @return

* @throws IOException

*/
public String getJsonCategory( ) IOException이 발생합니다. /json 데이터로 어셈블
sendMessage(jsonObj.toString());//json 데이터를 뷰에 푸시
return null
}
/**
* des: json 형식의 데이터 전송을 js로 다시 캡슐화합니다.
* autho:exceljava
* 날짜:Nov 20, 2009
* @param content
* @throws IOException
*/
public; void sendMessage(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse()
response.setCharacterEncoding("UTF-8")
response.getWriter().write(content); 🎜>
}