my first ajax

my first ajax

最近做个自助建站系统，设计到一个联动的选择框.(也就是一个大类栏目里面有很多小

栏目,当选择大类栏目的时候,小类列表框要出现相对该大类的所有小类,就象城市和省份

一样 )。

我写了个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`)
)
插入相应的数据。。。

建个操作数据库的类。。这个类还是有很多问题的。。不管那里多。运行出来再说。

 

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){ // 没有异常，继续执行
     req.onreadystatechange = processRequest; 
　  　req.open("GET",url, true); 
　  　req.send(null); 
　　} else
          alert("err");
 } 
  // 处理返回信息的函数
function processRequest(){
　　if (req.readyState == 4) { // 判断对象状态
　　if (req.status == 200) { // 信息已经成功返回，开始处理信息
    //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 ="查看小类的结果" />
</ body >
</ html >

OK...

还在改。。先把他记下来。。