jsp ajax下拉框无限级联动

最新推荐文章于 2022-07-09 21:50:03 发布

转载最新推荐文章于 2022-07-09 21:50:03 发布 · 2.7k 阅读

文章标签：

#ajax #jsp #xmlhttprequest #xml #function #stylesheet

java常用专栏收录该内容

9 篇文章

订阅专栏

好久没写博客了，最近有点新的收获所以将成果写上来，来表示我的喜悦心情。ajax这个东西以前一直没用过，就知道好，今天终于做了第一个ajax程序，实现下拉框无限级联动！本人本着开源原则，代码公开，与大家分享，多提宝贵意见！

chatercreate.jsp//这是显示页

<%@ page language="java"import="java.util.*,bean.*,java.sql.*"pageEncoding="gbk"%>
<%
BusinessService bs=new BusinessService();
Connection con=bs.getConnection();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<html>
<head>

   <title>My JSP 'chaptercreate.jsp' startingpage</title>

<meta http-equiv="pragma"content="no-cache">
<meta http-equiv="cache-control"content="no-cache">
<meta http-equiv="expires"content="0">
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="Thisis my page">

    <styletype="text/css">

   </style>
    <SCRIPT type="text/javascript">
       var req;
       window.onload=function(){
       }

       function Change_Select(t)
       {
           var zhi=document.getElementByIdx(t).value;
           var url="select.jsp?id="+escape(zhi)+"&&type="+t;

           if(window.XMLHttpRequest)
           {
               req=new XMLHttpRequest();
           }else if(window.ActiveXObject)
           {
               req=new ActiveXObject("Microsoft.XMLHTTP");
           }

           if(req)
           {
               req.open("GET",url,true);
               req.onreadystatechange=callback;
               req.send(null);
           }
       }

       function callback()
       {
           if(req.readyState == 4)
           {
               if(req.status == 200)
               {
                   parseMessage();
               }else{
                   alert("Not able to retrieve description"+req.statusText);
               }
           }
       }

       function parseMessage()
       {
           var xmlDoc=req.responseXML.documentElement;
           varstate=xmlDoc.getElementsByTagName_r("state")[0].firstChild.nodeValue;
           var xSel=xmlDoc.getElementsByTagName_r('select');
           var select_root;
           if(state=='bigtypeselect'){
           select_root=document.getElementByIdx('smalltypeselect');}
           else if(state=='smalltypeselect'){
           select_root=document.getElementByIdx('bookselect');}
           select_root.options.length=0;

           for(var i=0;i<xSel.length;i++)
           {
               var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
               var xText=xSel[i].childNodes[1].firstChild.nodeValue;

               var option=new Option(xText,xValue);
               try{
                   select_root.add(option);
               }catch(e){
               }
           }


       }
   </SCRIPT>
</head>

<body>
<form name="form1" method="post"action="">
    <divalign="center"class="STYLE1">章节生成页   </div>
</form>
<%
List list=bs.findAllBigType(con);
   %>
<form name="form2" method="post"action="">
   按大类生成章节
   <label>
    <selectname="bigtypeselect" id="bigtypeselect"onChange="Change_Select('bigtypeselect')">
    <%
    for(inti=0;i<list.size();i++){
    BigTypebigtype=(BigType)list.get(i);
    %>
    <optionvalue=<%=i %>><%=bigtype.getBigTypeName()%></option>
    <%
    }
    %>
   </select>
   </label>
   <label>
    <inputtype="submit" name="Submit" value="生成">
   </label>
</form>
<form name="form3" method="post"action="">
   按小类生成章节
   <label>
    <selectname="smalltypeselect" id="smalltypeselect"onChange="Change_Select('smalltypeselect')">
   </select>
   </label>
   <label>
    <inputtype="submit" name="Submit2" value="生成">
   </label>
</form>
<form name="form4" method="post"action="">
   按书生成章节
   <label>
    <selectname="bookselect" id="bookselect">
   </select>
   </label>
   <label>
    <inputtype="submit" name="Submit3" value="生成">
   </label>
</form>
<form name="form5" method="post"action="">
   <p>按章节起始ID生成</p>
   <p>起始章节ID
     <label>
     <input name="schapterID" type="text" id="schapterID">
     </label>
   终止章节ID
   <label>
    <inputname="echapterID" type="text" id="echapterID">
   </label>
   <label>
    <inputtype="submit" name="Submit4" value="生成">
   </label>
   </p>
</form>
<p> </p>
</body>
</html>

select.jsp//这是调用页面

<%@ pagelanguage="java" import="java.util.*,bean.*,java.sql.*"pageEncoding="gbk"%>
<%
BusinessService bs=new BusinessService();
Connection con=bs.getConnection();
%>
<%
response.setContentType("text/xml; charset=utf-8");
       response.setHeader("Cache-Control","no-cache");
       String targetId=request.getParameter("id").toString();
       String type=request.getParameter("type").toString();
       int id=Integer.parseInt(targetId);
       String xml_start="<selects>";
       String xml_end="</selects>";
       String xml="";
       List list=null;
       String typeselect="<state>"+type+"</state>";
       if(type.equals("bigtypeselect")){
       list=bs.findAllSmallType(id,con);
       for(int i=0;i<list.size();i++){
       SmallType smallType=(SmallType)list.get(i);
       xml+="<select><value>"+i+"</value><text>"+smallType.getSmallTypeName()+"</text></select>";
       }
       }else if(type.equals("smalltypeselect")){
       list=bs.findAllArticleBySmallTypeID(id,con);
       for(int i=0;i<list.size();i++){
       Article book=(Article)list.get(i);
       xml+="<select><value>"+i+"</value><text>"+book.getArticleName()+"</text></select>";
       }
       }
       String last_xml=xml_start+typeselect+xml+xml_end;
       response.getWriter().write(last_xml);
%>