jquery の ajax を使用して 2 レベルのインタラクティブな menu_javascript スキルを実装する-jsチュートリアル-php.cn

jquery の ajax を使用して 2 レベルのインタラクティブな menu_javascript スキルを実装する

WBOY

リリース： 2016-05-16 17:11:10

オリジナル

1171 人が閲覧しました

メニューリソースはデータベースに保存されます。 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); 🎜>
} 