blogjava's web log

          blogjava's web log
          ...

          my first ajax

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

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

          一樣 )。

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

          一聲。


          我是這樣做的。先建二張表
          我用的是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,'大類(lèi)1');
          INSERT INTO `t_bigclass` VALUES (2,'大類(lèi)2');
          INSERT INTO `t_bigclass` VALUES (3,'大類(lèi)3');
          INSERT INTO `t_bigclass` VALUES (4,'大類(lèi)4');
          INSERT INTO `t_bigclass` VALUES (5,'大類(lèi)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ù)。。。

          建個(gè)操作數(shù)據(jù)庫(kù)的類(lèi)。。這個(gè)類(lèi)還是有很多問(wèn)題的。。不管那里多。運(yùn)行出來(lái)再說(shuō)。

          ?

          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();

          ????}

          ???
          ????
          }


          再來(lái)一個(gè) 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);

          ????}

          建個(gè)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){?//?沒(méi)有異常,繼續(xù)執(zhí)行
          ?????req.onreadystatechange?=?processRequest;?
           ?? req.open(
          "GET",url,?true);?
           ?? req.send(
          null);?
            }
          ?else
          ??????????alert(
          "err");
          ?}
          ?
          ??
          //?處理返回信息的函數(shù)
          function?processRequest(){
            
          if?(req.readyState?==?4)?{?//?判斷對(duì)象狀態(tài)
            if?(req.status?==?200)?{?//?信息已經(jīng)成功返回,開(kāi)始處理信息
          ????//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">大類(lèi)2</option>>
            
          <option?value="3">大類(lèi)3</option>>
            
          <option?value="4">大類(lèi)4</option>>
          ????
          <option?value="5">大類(lèi)5</option>>
          <option?value="1">大類(lèi)1</option>>
          <option?value="11">大類(lèi)100</option>>
          </select>
          <select?id="city">
            
          <option?value="">smallclass</option>
          </select>
          <input?type="button"?onclick="showid()"??value="查看小類(lèi)的結(jié)果"/>
          </body>
          </html>

          OK...

          還在改。。先把他記下來(lái)。。

          posted on 2006-05-08 00:07 record java and net 閱讀(443) 評(píng)論(2)  編輯  收藏 所屬分類(lèi): AJAX

          評(píng)論

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

          你這個(gè)做法response.setContentType("text/xml");傳遞回來(lái)的是XML對(duì)象

          我的是將他們做為一個(gè)字符串,傳回來(lái),
          while ( rs.next() )
          {
          sb.append( rs.getString( 顯示的字) + ","
          + rs.getLong(實(shí)際的Value) );
          if ( !rs.isLast() ) sb.append( "|" );//用|來(lái)區(qū)分不同的記錄
          }
          這里所有的記錄是這樣穿回來(lái)的
          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ù)  更多評(píng)論   

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

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

            回復(fù)  更多評(píng)論   

          導(dǎo)航

          常用鏈接

          留言簿(44)

          新聞檔案

          2.動(dòng)態(tài)語(yǔ)言

          3.工具箱

          9.文檔教程

          友情鏈接

          搜索

          最新評(píng)論

          主站蜘蛛池模板: 大埔县| 澳门| 永定县| 宝坻区| 拜城县| 缙云县| 错那县| 曲沃县| 乌拉特前旗| 邢台县| 泗阳县| 济宁市| 甘泉县| 沧州市| 玛纳斯县| 黄大仙区| 太白县| 南丹县| 凯里市| 灵宝市| 原阳县| 满洲里市| 文安县| 封开县| 沂源县| 博湖县| 汉寿县| 翼城县| 临高县| 丹东市| 郓城县| 甘泉县| 象山县| 海口市| 弥渡县| 军事| 扶余县| 建始县| 阳山县| 和硕县| 乐东|