Home > Developer > JavaScript
Using jquery ajax to implement level-2 interactive menus
The second-level interactive menu is implemented using jquery ajax. The specific implementation is as follows. For more information, see
The menu resources are saved in the database. The ajax Implementation of jquery is used. The package used is: json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json. js jquery. js
Jsp page code:
The Code is 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. wharvard ",
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" 2.16.html (str );
}
</Script>
<Html>
<Body>
<Div align = "center">
Select the Department type
<S: select list = "rfones" listKey = "recordId" listValue = "title" name = "oneId" theme = "simple" id = "oneId" value = "oneID" onchange = "onchangeShow (this. value) "> </s: select>
Select File Type
<S: select list = "rftwos" listKey = "recordId" listValue = "title" name = "twoId" theme = "simple" id = "twoId" value = "twoID"> </s: select>
</Div>
</Body>
</Html>
Code of action in struts
The Code is as follows:
/**
* Des: obtains the level-2 linkage menu.
* Autho: exceljava
* Date: Nov 20,200 9
* @ Return
* @ Throws IOException
*/
Public String getJsonCategory () throws IOException {
Rfjsons = archiveService. getCategoryByParentID (parentId); // obtain data from the database
Net. sf. json. JSONArray jsonObj = net. sf. json. JSONArray. fromObject (rfjsons); // assemble it into json data
SendMessage (jsonObj. toString (); // push json data to the view
Return null;
}
/**
* Des: encapsulate and send json-format data back to js
* Autho: exceljava
* Date: Nov 20,200 9
* @ Param content
* @ Throws IOException
*/
Public void sendMessage (String content) throws IOException {
HttpServletResponse response = ServletActionContext. getResponse ();
Response. setCharacterEncoding ("UTF-8 ");
Response. getWriter (). write (content );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
