Two-level interactive menu, using ajax implementation of jquery, the specific implementation is as follows, friends who like it can refer to the following
Menu resources are stored in the database. Uses jQuery's Ajax implementation. The packages used are: json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js
jsp page code:
Copy the code code as follows:
<% @ page contentType = "text / html; charset = gbk"%>
<% @ taglib prefix = "s" uri = "/ struts-tags"%>
<script type = "text / javascript" src = "js / jquery.js"> </ script>
<script type = "text / javascript" src = "js / json.js"> </ script>
<% 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}, // parameter
type: "post",
cache: false,
dataType: "json", // Return json data
error: function () {
alert ('error');
},
success: onchangecallback
});
}
function onchangecallback (data) {
document.all ['twoId']. options.length = 0; // Clear the original option
var str = "";
for (var i = 0; i <data.length; i ++) {
str + = "<option value = '" + data [i] .recordId + "'>" + data [i] .title + "</ option>"
}
$ ("# twoId"). html (str);
}
</ script>
<html>
<body>
<div align = "center">
Please select a department type
<s: select list = "rfones" listKey = "recordId" listValue = "title" name = "oneId" theme = "simple" id = "oneId" value = "oneID" onchange = "onchangeShow (this.value)"> </ s: select>
Please select a file type
<s: select list = "rftwos" listKey = "recordId" listValue = "title" name = "twoId" theme = "simple" id = "twoId" value = "twoID"> </ s: select>
</ div>
</ body>
</ html>
Action code in struts
Copy the code code as follows:
/ **
* des: get secondary linkage menu
* autho: exceljava
* date: Nov 20, 2009
* @return
* @throws IOException
* /
public String getJsonCategory () throws IOException {
rfjsons = archiveService.getCategoryByParentID (parentId); // Get data from the database here
net.sf.json.JSONArray jsonObj = net.sf.json.JSONArray.fromObject (rfjsons); // Assemble into json data
sendMessage (jsonObj.toString ()); // Push json data to the view
return null;
}
/ **
* des: encapsulate and send the data in json format back to js
* autho: exceljava
* date: 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);
}
