blogjava's web log

blogjava's web log
...

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...

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

posted on 2006-05-08 00:07 record java and net 阅读(431) 评论(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( "|" );//用|来区分不同的记录
}
这里所有的记录是这样穿回来的
a,aVaule | b,bValue.......

resText = xmlHttp.responseText //传回的字符串
each = resText.split("|") //以|为分割符创建字符数组
//之后再建立了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])
}  回复  更多评论   

# re: my first ajax 2006-05-26 17:56 吴某人-不断地学习

哦。。你这样也可以啊。。

  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

常用链接

留言簿(44)

新闻档案

2.动态语言

3.工具箱

9.文档教程

友情链接

搜索

最新评论