java + ajax(三级联动) myself

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String contextPath = request.getContextPath();
   
 if (request.getProtocol().compareTo("HTTP/1.0") == 0) {
        response.setHeader("Pragma","no-cache");
    } else {
        response.setHeader("Cache-Control","no-cache");
    }
   
    response.setDateHeader("Expires", 0);
%>

<link rel="stylesheet" type="text/css" href="<%=contextPath%>/common/css/style.css "/>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/common/css/home.css ">
<style type="text/css">
<!--
.table{border-color:#A4A4A4; background-color:#E6E6E6}
.number{color:#636361;font-weight:bold;font-size:26px; font-family:Arial;}
.select{color:#DA251E;font-weight:bold;font-size:14px; font-family:Arial;}
.fontOne{color:#4B4B4B;font-size:13px; font-family:Arial;padding-bottom:10px}
.style1{padding-bottom:2px}
-->
</style>
<body onload="init()">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top" colspan="3">
            <img src="<%=contextPath%>/images/support/Support-Image.jpg" width="627px" height="67px" alt=""/></td>
    </tr>
      <tr>
        <td height="20px" colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td width="15px">&nbsp;</td>
        <td>
            <div style="text-align: center">
                <table style="width: 100%; background-color:#f9f9f9"> 
                    <tr>
                        <td height="40px" style="width: 144px" colspan="3">&nbsp;</td>
                    </tr>                 
                    <tr>
                        <td align="right" valign="top" class="support_Number" width="150px" style="padding-right:8px">
                            &nbsp;1</td>
                        <td width="220">
                            <div style="text-align: center">
                                <table style="width: 100%;border-style:solid;border-width:1px;"  cellpadding="0" cellspacing="0" class="table">
                                    <tr>
                                    <td>
                                    <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                                         <tr>
                                            <td style="height: 12px">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td class="style1">&nbsp;&nbsp;<font class="support_selectName">Select a Category</font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="150px;" style="padding-left:5px;">
                                            <select id="category" name="category" style="WIDTH: 150px; border:none; font-size:11px;" onchange="getSubCategory(this.value)">
         <option value="0"  >Please select</option>
         <option value = "1" selected="selected">天津</option>
         <option value = "2">北京</option>
         </select>           
                                            </td>
                                        </tr>
                                         <tr>
                                            <td height="29px">&nbsp;</td>
                                        </tr>
                                    </table>
                                   </td>
                                  </tr>
                                 </table>
                            </div>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td height="18px" colspan="3">&nbsp;</td>
                    </tr>
                    <tr>
                        <td  align="right" valign="top" class="support_Number" style="padding-right:8px">
                            &nbsp;2</td>
                        <td>
                            <div style="text-align: center">
                                <table style="width: 100%;border-style:solid;border-width:1px;"  cellpadding="0" cellspacing="0"  class="table">
                                    <tr>
                                     <td>
                                    <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                                         <tr>
                                            <td  style="height: 12px">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td class="style1">&nbsp;&nbsp;<font class="support_selectName">Select a SubCategory</font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="150px;" style="padding-left:5px;">
                                                 <select id="subCategory" name="subCategory" style="WIDTH: 150px; border:none; font-size:11px;" onchange="getProduct(this.value)">
         <option value="0" >Please select</option>
         </select>                                             
                                            </td>
                                        </tr>
                                         <tr>
                                            <td height="29px">&nbsp;</td>
                                        </tr>
                                    </table>
                                    </td>
                                  </tr>
                                 </table>
                            </div>
                        </td>
                        <td >
                        </td>
                    </tr>
                     <tr>
                        <td height="10px" colspan="3">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="right" valign="top" class="support_Number" style="padding-right:8px">
                            &nbsp;3</td>
                        <td>
                            <div style="text-align: center; vertical-align:top">
                                <table style="width: 100%; border-style:solid;border-width:1px;"  cellpadding="0" cellspacing="0"  class="table">
                                   
                                    <tr>
                                    <td>
                                    <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td height="12px">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td class="style1">&nbsp;&nbsp;<font class="support_selectName">Select a Category</font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >&nbsp;
                                                  <select id="product" name="product" style="WIDTH: 150px; HEIGHT: 20px;border:none; font-size:11px;">
                                <option value="0">Please select</option>
                                </select>                                
                                            </td>
                                        </tr>
                                         <tr>
                                            <td height="29px">&nbsp;
                                               
                                            </td>
                                        </tr>
                                    </table>
                                    </td>
                                   </tr>
                                 </table>
                            </div>
                        </td>
                        <td>
                            <div style="text-align: center">
                                <table style="width: 100%">
                                    <tr>
                                        <td width="5px">&nbsp;</td>
                                        <td style="width: 180px" class="support_submitText">
                                            To better&nbsp; assist&nbsp; your search,<br />
                                            please select the product,<br />
                                            model and category.</td>
                                    </tr>
                                    <tr>
                                        <td width="5px">&nbsp;</td>
                                        <td width="20%" style="width: 180px"><img id="buttonfiletype" SRC="<%=contextPath%>/images/support/SubmitRequest.jpg" WIDTH="107" HEIGHT="26" onmouseover="buttonMouseOver('buttonfiletype')" onclick="RefreshPageThree()"></td>
                  </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                      <tr>
                        <td height="30px">&nbsp;</td>
                    </tr>
                </table>
            </div>
        </td>
        <td width="15px">&nbsp;</td>
    </tr>
    <tr>
        <td height="15px" colspan="3">&nbsp;</td>
    </tr>
</table>
</body>
 <script type="text/javascript" language="javascript">
var http_request = false;
var optionValue="";

function init() {
    var categoryId = "1";
 getSubCategory(categoryId);
}

function send_request(url) {//初始化,指定处理函数,发送请求的函数
 http_request = false;
 
 if (window.XMLHttpRequest) { // Mozilla浏览器
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
   http_request.overrideMimeType('text/xml');//设置MIME类别
  }
 } else if (window.ActiveXObject) { // IE 浏览器
  try {
   http_request = new ActiveXObject("Msxml2.XMLHTTP");
            http_request.overrideMimeType('text/xml');//设置MIME类别
  } catch (e) {
   try {
             http_request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
     }
    }
    
    if (!http_request) {//异常,创建对象实例失败
        alert('Giving up :( 创建对象实例失败');
        return false;
    }
   
    http_request.onreadystatechange = processRequest;
    http_request.open('post', url, true);
    http_request.send(null);
}

function processRequest() {
 if (http_request.readyState == 4) {
  if (http_request.status == 200) {
         optionValue = http_request.responseText + "";
          setSelectObj(optionValue);
        } else {
            alert('你所请求的页面有问题');
        }
    }
}

function showRoles(obj) {
 document.getElementById(obj).parentNode.style.display = "";
 document.getElementById(obj).innerHTML = "正在读取数据........";
 testPos=obj;
 send_request('sample_10.jsp');
}

function getSubCategory(subCategoryObj) {
 send_request("getDropDownList.jsp?flag=subCategory&categoryid="+subCategoryObj);
}

function getProduct(productObj) {
 send_request("getDropDownList.jsp?flag=product&subid="+productObj);
}

function setSelectObj(obj) {
    var arr1 = new Array();
    var arr2 = new Array();
    var arr3= new Array();
    var str = "";

    var selectsubCategoryObj = document.getElementById("subCategory");
    var selectproductObj = document.getElementById("product");
    var selectCategoryObj = document.getElementById("category");
   
  if (trimString(obj) != "") {
   arr1 = obj.split('@');
  str = arr1[2]+"";
        
  if (arr1[2] == "subCategory\r\n") {
   arr2 = arr1[0].split(',');
   arr3 = arr1[1].split(',');  
     
   //删除原来的      
   if (selectsubCategoryObj.value != "") {
    for (var i = 0; i < 100; i++) {
     selectsubCategoryObj.remove(0);
    }
   } 
       
   //增加新的
   selectsubCategoryObj.add(new Option("Please select", "0"));
   
   for (var i = 0; i < arr2.length; i++) {
       selectsubCategoryObj.add(new Option(trimString(arr3[i]), trimString(arr2[i])));
   }
  } else if (arr1[2] == "product\r\n") {
   arr2 = arr1[0].split(',');
   arr3 = arr1[1].split(',');   
     
   //删除原来的
   if (selectproductObj.value != "") {
    for (var i = 0; i < 100; i++) {
     selectproductObj.remove(0);
    }      
   }    
     
   //增加新的
   selectproductObj.add(new Option("Please select", "0"));
    
   for(var i = 0; i < arr2.length; i++) {
       selectproductObj.add(new Option(trimString(arr3[i]), trimString(arr2[i])));
   }
  }
 } else {
  if (selectCategoryObj.value == "0"  || (selectCategoryObj.value != "0" && trimString(obj) == "")) {
   //删除原来的      
   if (selectsubCategoryObj.value != "") {
    for (var i = 0; i < 100; i++) {
     selectsubCategoryObj.remove(0);
    }
   } 
        
   //增加默认项
   selectsubCategoryObj.add(new Option("Please select", "0"));
  } 
  
  if ((selectCategoryObj.value != "0" && selectsubCategoryObj.value == "0") ||
     (selectCategoryObj.value == "0" && selectsubCategoryObj.value == "0")) {
   //删除原来的
   if (selectproductObj.value != "") {
    for (var i = 0; i < 100; i++) {
     selectproductObj.remove(0);
    }      
   }    
     
   //增加默认项
   selectproductObj.add(new Option("Please select", "0"));   
  }  
 } 
}

function trimString(sStr) {
  //by xmzh
 if (sStr == null) return "";
   return sStr.replace(/(^\s*)|(\s*$)/ig,"");
}
 </script>

 


getDropDownList.jsp


<%@ page language="java" import="java.util.*,java.sql.*"
 pageEncoding="UTF-8"%>
<%
 Connection conn = null;
 ResultSet rs = null;
 PreparedStatement ps = null;
 String sub_id = "";
 String sub_name = "";
 String p_id = "";
 String p_name = "";
 String categoryid = request.getParameter("categoryid");
 String subid = request.getParameter("subid");
 String flag = request.getParameter("flag");
 
 String str1= "";
 String str2= "";
 
 StringBuffer sb = new StringBuffer("");
 StringBuffer sb1 = new StringBuffer("");
 StringBuffer sb2 = new StringBuffer("");
 StringBuffer sb3 = new StringBuffer("");
 
 try { 
  String drivername="com.microsoft.jdbc.sqlserver.SQLServerDriver";
  String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=webportalTest";
 
  try {
   Class.forName(drivername);
   conn=DriverManager.getConnection(url,"sa","206073");
  }catch(SQLException e){
    System.out.println(e.getMessage());
  }
 
  
  
  if (categoryid != null && ("subCategory".equals(flag) || "subCategory" == flag)) {
   ps = conn.prepareStatement("select * from T_SubCategory where categoryId='"+ categoryid + "'");
   rs = ps.executeQuery();
   
   while (rs.next()) {
    sub_id = rs.getString("id");
    sub_name = rs.getString("name");
    sb.append( sub_id + ",");
    sb1.append(sub_name+",");
   }  
  
   if (!sb.toString().equals("") && !sb1.toString().equals("")) {
    str1= sb.substring(0,sb.length()-1);
    str2= sb1.substring(0,sb1.length()-1);
    out.print(str1+"@"+str2+"@subCategory");
   }
  } else if (subid != null && ("product".equals(flag) || "product" == flag)) {
   ps = conn.prepareStatement("select * from T_Product where subCategoryId='"+ subid + "'");
   rs = ps.executeQuery();  
   
   while (rs.next()) {
    p_id = rs.getString("id");
    p_name = rs.getString("name");
    sb2.append(p_id + ",");
    sb3.append(p_name + ",");
   }
   
   if (!sb2.toString().equals("") && !sb3.toString().equals("")) {
    String str3 = sb2.substring(0,sb2.length()-1);
    String str4 = sb3.substring(0,sb3.length()-1);
    out.print(str3 + "@" + str4 + "@product");
   }
  }
 } catch (Exception ex) {
  ex.printStackTrace();
  out.println("异常:" + ex.getMessage());
 } finally {
  try {
   rs.close();
   ps.close();
     
   if (conn != null) {
    conn.close();
   }    
  } catch (Exception e) {
   rs = null;
   ps = null;
   conn = null;
   e.printStackTrace();
  }
 }
%>

posted @ 2008-04-21 15:21  南守拥  阅读(1153)  评论(0编辑  收藏  举报