zoukankan      html  css  js  c++  java
  • 利用XMLHTTP实现的二级连动Select(转)

    传统二级连动是把所有的数据都传到有客户端..
    利用XMLHTTP.我们可以实时地返回我们所需要的数据.
    select.htm

    <script language="JavaScript">
    function GetResult(str)
    {
    /*
    *--------------- GetResult(str) -----------------
    * GetResult(str)
    * 功能:通过XMLHTTP发送请求,返回结果.
    * 参数:str,字符串,发送条件.
    * 实例:GetResult(document.all.userid.value);
    *--------------- GetResult(str) -----------------
    */
    var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    oBao.open("POST","Server.asp?sel="+str,false);
    oBao.send();
    //服务器端处理返回的是经过escape编码的字符串.
    //通过XMLHTTP返回数据,开始构建Select.
    BuildSel(unescape(oBao.responseText),document.all.sel2)
    }

    function BuildSel(str,sel)
    {
    /*
    *--------------- BuildSel(str,sel) -----------------
    * BuildSel(str,sel)
    * 功能:通过str构建Select.
    * 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
    * 参数:sel,要构建的Select
    * 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
    *--------------- BuildSel(str,sel) -----------------
    */
    //先清空原来的数据.
    sel.options.length=0;
    var arrstr = new Array();
    arrstr = str.split(",");
    //开始构建新的Select.
    for(var i=0;i<arrstr.length;i++)
    {
    sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
    }
    }
    </script>
    <select name="sel" onChange="GetResult(this.value)">
    <option value="">请选择
    <option value="福建省">福建省
    <option value="湖北省">湖北省
    <option value="辽宁省">辽宁省
    <select>
    <select name="sel2"></select>

    server.asp  服务器端处理.

    <% @Language="JavaScript" %>
    <%
    function OpenDB(sdbname)
    {
    /*
    *--------------- OpenDB(sdbname) -----------------
    * OpenDB(sdbname)
    * 功能:打开数据库sdbname,返回conn对象.
    * 参数:sdbname,字符串,数据库名称.
    * 实例:var conn = OpenDB("database.mdb");
    *--------------- OpenDB(sdbname) -----------------
    */
    var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
    var conn = Server.CreateObject("ADODB.Connection");
    conn.Open(connstr);
    return conn;
    }
    var oConn = OpenDB("data.mdb");
    var province = Request("sel");
    var arrResult = new Array();
    var sql = "select city from china where province='"+province+"'";
    var rs = Server.CreateObject("ADODB.Recordset");
    rs.Open(sql,oConn,1,1);
    while(!rs.EOF)
    {
    //遍历所有适合的数据放入arrResult数组中.
    arrResult[arrResult.length] = rs("city").Value;
    rs.MoveNext();
    }
    //escape解决了XMLHTTP。中文处理的问题.
    //数组组合成字符串.由","字符串连接.
    Response.Write(escape(arrResult.join(",")));
    %>


    数据库设计
    data.mdb
    表china.
    字段
    id  自动编号
    province 文本
    city  文本

    表:china 数据:
    id province city
    1 福建省  福州市
    2 福建省  厦门市
    3 福建省  泉州市
    4 湖北省  武汉市
    5 湖北省  荆州市
    6 湖北省  宜昌市
    7 辽宁省  沈阳市
    8 辽宁省  大连市
    9 辽宁省  盘锦市

  • 相关阅读:
    不打无准备之仗,最全868道Java面试题及答案
    准备两个月,面试五分钟,Java岗面试为何越来越难?
    2020JAVA面试必备的26个关键知识点,刷完大厂随便跳
    2020年最全java面试真题解析(980道),你没见过的面试题都在这
    java大厂面试200+(含答案):基础+缓存+网络+分布式....
    判断js中的数据类型的几种方法
    JPG、PNG、GIF、SVG 等格式图片区别
    js闭包
    什么是 js 变量提升 (Javascript Hoisting)
    js函数声明和函数表达式的区别
  • 原文地址:https://www.cnblogs.com/zhuor/p/306507.html
Copyright © 2011-2022 走看看