blogjava's web log

          blogjava's web log
          ...

          my first ajax

          最近做個自助建站系統(tǒng),設(shè)計到一個聯(lián)動的選擇框.(也就是一個大類欄目里面有很多小

          欄目,當(dāng)選擇大類欄目的時候,小類列表框要出現(xiàn)相對該大類的所有小類,就象城市和省份

          一樣 )。

          我寫了個domo測試了一下。。就不知道這樣效率怎么樣。那位有好的辦法。。別忘通知

          一聲。


          我是這樣做的。先建二張表
          我用的是MYSQL

          CREATE TABLE `t_bigclass` (
          ? `b_id` int(11) NOT NULL auto_increment,?
          ? `b_name` varchar(50) default NULL,
          ? PRIMARY KEY? (`b_id`)
          )
          INSERT INTO `t_bigclass` VALUES (1,'大類1');
          INSERT INTO `t_bigclass` VALUES (2,'大類2');
          INSERT INTO `t_bigclass` VALUES (3,'大類3');
          INSERT INTO `t_bigclass` VALUES (4,'大類4');
          INSERT INTO `t_bigclass` VALUES (5,'大類5');


          CREATE TABLE `t_smallclass` (
          ? `s_id` int(11) NOT NULL auto_increment,
          ? `b_id` int(11) default NULL,
          ? `s_name` varchar(50) default NULL,
          ? PRIMARY KEY? (`s_id`)
          )
          插入相應(yīng)的數(shù)據(jù)。。。

          建個操作數(shù)據(jù)庫的類。。這個類還是有很多問題的。。不管那里多。運行出來再說。

          ?

          package ?dyoptions.dal;
          import ?java.sql. * ;
          import ?java.io.UnsupportedEncodingException;

          public ? class ?dbobject? {
          ????
          private ?Connection?conn = null ;
          ????
          private ?ResultSet?rs = null ;
          ????
          private ?Statement?stmt = null ;
          ????
          private ?String?url;
          ????
          private ?String?uid;
          ????
          private ?String?pwd;
          ????
          private ?String?jdbc;
          ????
          private ? boolean ?bflag = false ;

          ????
          public ?dbobject()? {
          ????}

          ????
          public ?Connection?getSession()? throws ?SQLException,?ClassNotFoundException,
          ????????????IllegalAccessException,?InstantiationException?
          {
          ????????url
          = " jdbc:mysql://localhost:3306/cms " ;
          ????????uid
          = " root " ;
          ????????pwd
          = " wujun " ;
          ????????jdbc
          = " org.gjt.mm.mysql.Driver " ;
          ??
          ????????????Class.forName(jdbc).newInstance();
          ???????????
          ????????conn
          = java.sql.DriverManager.getConnection(url,uid,pwd);
          ???????
          return ?conn;
          ???????
          ????????
          ????}

          ????
          public ?String?execSql( int ?bigid)? throws ?InstantiationException,
          ????????????IllegalAccessException,?ClassNotFoundException,?SQLException,
          ????????????UnsupportedEncodingException?
          {
          ????????
          this .getSession();
          ????????System.out.print(
          " bigid== " + bigid);
          ????????String?strsql
          = " select?*?from?t_smallclass?where?b_id=? " ;
          ???????PreparedStatement?ps
          = ?conn.prepareStatement(strsql);
          ???????ps.setInt(
          1 ,bigid);
          ???????rs
          = ps.executeQuery();
          ????????System.out.print(
          " rowwwww " + rs.getRow());
          ????????java.lang.StringBuffer?sb
          = new ?StringBuffer( " <test> " );
          ?????
          while (rs.next())
          ???????
          {
          ???????????System.out.print(rs.getInt(
          1 ));
          ???????????
          // String?temp=new?String(rs.getString(4).getBytes("ISO-8859-1"),"gb2312");
          ????????????sb.append( " <id> " + rs.getInt( 1 ) + " </id> " );
          ???????????sb.append(
          " <small> " + rs.getString( 4 ) + " </small> " );
          ??????????
          // ?System.out.print(rs.getString(2));
          ???????????
          // System.out.print(rs.getString(3));
          ???????}

          ???????sb.append(
          " </test> " );
          ???????System.out.print(sb.toString());
          ????ps.close();
          ????rs.close();
          ????conn.close();
          ???
          return ?sb.toString();

          ????}

          ???
          ????
          }


          再來一個 servlet,doget方法代碼
          public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)?throws
          ????????????ServletException,?IOException
          ?????????????
          {
          ????????response.setContentType(
          "text/xml");
          ????????response.setCharacterEncoding(
          "UTF-8");
          ????????response.setHeader(
          "Cache-Control",?"no-cache");
          ????????
          int?bigid=Integer.parseInt(request.getParameter("bigid"));
          ????????dbobject?dd
          =new?dbobject();
          ????????String?str?
          =?null;
          ????????
          try?{
          ????????????str?
          =?dd.execSql(bigid);
          ????????}
          ?catch?(SQLException?ex)?{
          ????????}
          ?catch?(ClassNotFoundException?ex)?{
          ????????}
          ?catch?(IllegalAccessException?ex)?{
          ????????}
          ?catch?(InstantiationException?ex)?{
          ????????}

          ????????PrintWriter?out
          =response.getWriter();
          ????????out.write(str.toString());
          ????????out.close();

          ??
          //out.print(str);

          ????}

          建個jsp看看。。

          <%@?page?contentType="text/html;?charset=GBK"?%>

          <html>
          <head>
          <title>
          jsp1
          </title>
          <script?type="text/javascript">
          ?
          function?getResult(stateVal)?{
            
          var?url?="servlet1?bigid="+stateVal;?
            
          if?(window.XMLHttpRequest)?{?//Mozilla?瀏覽器
            ??req?=?new?XMLHttpRequest();?
            }
          else?if?(window.ActiveXObject)?{?//?IE瀏覽器
            ??req?=?new?ActiveXObject("Microsoft.XMLHTTP");?
            }
          ?
            
          if(req){?//?沒有異常,繼續(xù)執(zhí)行
          ?????req.onreadystatechange?=?processRequest;?
           ?? req.open(
          "GET",url,?true);?
           ?? req.send(
          null);?
            }
          ?else
          ??????????alert(
          "err");
          ?}
          ?
          ??
          //?處理返回信息的函數(shù)
          function?processRequest(){
            
          if?(req.readyState?==?4)?{?//?判斷對象狀態(tài)
            if?(req.status?==?200)?{?//?信息已經(jīng)成功返回,開始處理信息
          ????//alert(req.responseText);
          ???//?alert(req.responseXML.getElementsByTagName("small"));
           ??var?city?=?req.responseXML.getElementsByTagName("small");
          ????
          ????
          var?smallid=req.responseXML.getElementsByTagName("id");
           ?? alert(smallid.length);
           ?? 
          var?str=new?Array();
          ?????
          var?smid=new?Array();
            ??
          for(var?i=0;i<city.length;i++){
            ?????str[i]
          =city[i].firstChild.data;
          ?????????smid[i]
          =smallid[i].firstChild.data;
            ??}

           ? 
          //alert(document.getElementById("city"));
           ? buildSelect(str,document.getElementById("small"),smid);
            }

            }

          }

          function?buildSelect(str,sel,smid)?{
            sel.options.length
          =0;
            
          for(var?i=0;i<str.length;i++)?{
            sel.options[sel.options.length]
          =new?Option(str[i],smid[i])
            }

          }

          function?showid()
          {
          ??
          if(document.getElementById("city").value=="")
          ??
          {
          ????alert(
          "null");
          ??}

          ??
          else
          ???alert(document.getElementById(
          "city").value);
          }

          </script>
          </head>
          <body?bgcolor="#ffffff">
          <h1>
          JBuilder?Generated?JSP
          </h1>

          <select?name="state"?onChange="getResult(this.value)">
            
          <option?value="2">大類2</option>>
            
          <option?value="3">大類3</option>>
            
          <option?value="4">大類4</option>>
          ????
          <option?value="5">大類5</option>>
          <option?value="1">大類1</option>>
          <option?value="11">大類100</option>>
          </select>
          <select?id="city">
            
          <option?value="">smallclass</option>
          </select>
          <input?type="button"?onclick="showid()"??value="查看小類的結(jié)果"/>
          </body>
          </html>

          OK...

          還在改。。先把他記下來。。

          posted on 2006-05-08 00:07 record java and net 閱讀(440) 評論(2)  編輯  收藏 所屬分類: AJAX

          評論

          # re: my first ajax 2006-05-26 16:40 誰伴我闖蕩

          你這個做法response.setContentType("text/xml");傳遞回來的是XML對象

          我的是將他們做為一個字符串,傳回來,
          while ( rs.next() )
          {
          sb.append( rs.getString( 顯示的字) + ","
          + rs.getLong(實際的Value) );
          if ( !rs.isLast() ) sb.append( "|" );//用|來區(qū)分不同的記錄
          }
          這里所有的記錄是這樣穿回來的
          a,aVaule | b,bValue.......

          resText = xmlHttp.responseText //傳回的字符串
          each = resText.split("|") //以|為分割符創(chuàng)建字符數(shù)組
          //之后再建立了select
          function buildSelect(str,sel,label)
          {
          sel.options.length=0;
          sel.options[sel.options.length]=new Option(label,"")
          for(var i=0;i<str.length;i++)
          {
          each=str[i].split(",")
          sel.options[sel.options.length]=new Option(each[0],each[1])
          }  回復(fù)  更多評論   

          # re: my first ajax 2006-05-26 17:56 吳某人-不斷地學(xué)習(xí)

          哦。。你這樣也可以啊。。

            回復(fù)  更多評論   

          導(dǎo)航

          常用鏈接

          留言簿(44)

          新聞檔案

          2.動態(tài)語言

          3.工具箱

          9.文檔教程

          友情鏈接

          搜索

          最新評論

          主站蜘蛛池模板: 通道| 甘谷县| 阿坝县| 久治县| 苍梧县| 东丰县| 友谊县| 浦江县| 繁峙县| 航空| 育儿| 香格里拉县| 连州市| 溆浦县| 泗阳县| 定西市| 济源市| 双城市| 宁陕县| 富锦市| 红原县| 元氏县| 九江县| 镇原县| 山西省| 得荣县| 乳源| 陈巴尔虎旗| 于田县| 怀来县| 汉寿县| 个旧市| 东乡| 航空| 彭水| 宣武区| 沙湾县| 赤城县| 日喀则市| 纳雍县| 凤山县|