Ajax implementation of the Web page of the middle-level menu design _ajax related

Source: Internet
Author: User
Saw the big gorge to make the cascading menu, I also swim a fish a hand, hehe, took a little time to make a cascade menu to paste up to see. In this case, the member name is automatically displayed as long as you select the member category name:
First build a project in Eclipse, the name is your own decision, here for Easyjf-menu, the corresponding browser page code is:
easyjf-menu.jsp
< @page contenttype= "Text/html;charser=utf-8" language= "java"%>
........
<script language= "JavaScript" >
var xmlhttpreq;
var Currentsort;
Creating Xmlhttprequset Objects
function Createxmlhttprequest () {
if (window. XMLHttpRequest) {
Xmlhttpreq=new XMLHttpRequest ();
}
else if (window. ActiveXObject) {
try{
Xmlhttpreq=new ActiveXObject ("msxml2.xmlhttp");
}catch (e) {}
try{
Xmlhttprequest=new ActiveXObject ("Microsoft.XMLHTTP");
}catch (e) {}
}
}
Send Request function
function SendRequest (URL) {
Createxmlhttprequest ();
Xmlhttpreq.open ("Get", url,true);
Xmlhttpreq.onreadystatechange=processresponse;
Xmlhttpreq.send (NULL);
}
Processing return information functions
function ProcessResponse () {
if (xmlhttprequest.readystate==4) {
if (xmlhttprequest.status==200) {
Updatemenu ();
}else{alert ("The page you requested has an exception!")}
}
}
Update menu functions
function Updatemenu () {
var res=xmlhttpreq.responsexml.getelementidbytagname ("res");
var sunmenu= "";
for (Var i=0;i<res.length;i++) {
submenu=submenu+res[1].fistchild.data+ "<br>";
}
Currentsort.innerhtml=submenu;
}
Create a cascading menu
function Showsubmenu (obj) {
Currentsort=document.getelementbyid (obj);
Currentsort.parentnode.style.display= "";
SendRequest ("menu?sort=" +obj);
}
</script>
&LT;B&GT;EASYJF member </b>
<a onclick= "Onshowsubmenu (' Big Gorge ')" > Big gorge </a>
, this page provides the corresponding menu for the user to choose, after the user selects the menu, calls the Showsubmenu (' XXX ') function, where the parameter is used to pass the user to select the menu the identification information to the server to decide obtains the server's which in the menu content, first obtains the menu the recognition information, Then submit to Ajax, where the innerHTML property to achieve positioning display!
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.