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");
function onchangeShow(oneId){
$.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);

部門の種類を選択してください


ファイルの種類を選択してください

Struts のアクションのコード

コードをコピーします
コードは次のとおりです:

/*** des: セカンダリ連携メニューの取得 * autho:exceljava * date:Nov 20, 2009 * @return

* @throws IOException

*/
public String getJsonCategory( ) throws IOException{
rfjsons=archiveService.getCategoryByParentID(parentId);// ここでデータベースからデータを取得します
net.sf.json.JSONArray jsonObj=net.sf.json.JSONArray.fromObject(rfjsons);/ /json データに組み立てます
sendMessage(jsonObj.toString());// json データをビューにプッシュします
return null
}
/**
* des: json 形式でデータを js に戻すカプセル化
* autho:exceljava
* date:Nov 20, 2009
* @param content
* @throws IOException
*/
public void sendMessage(String content) throws IOException{
HttpServletResponse = ServletActionContext.getResponse();
response.getWriter().write(content); 🎜>
}