DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XML不刷新頁面查詢數據庫中數據的方法
XML不刷新頁面查詢數據庫中數據的方法
編輯:XML詳解     

我在作ASP程序時經常遇到這種情況:

  將數據庫中的數據(如所有雇員名)列在列表框中,程序要求進行選擇其中一項或多項提交到下一個頁面。

  但麻煩的是如果數據(如雇員)過多,會給客戶的選擇帶來麻煩--要從很長的列表中進行數據定位。最好的解決方法是用戶在選擇前采用模糊查詢的方式進行數據定位,准確找出需要選擇的雇員名,再選擇、提交。

  問題出現在我們程序員面前:如何不刷新頁面篩選從數據庫中篩選數據。本人的方法有兩種:

  1、采用雙列表框的方法

  2、采用XML方法

  本文主要介紹第二種方法:采用XML的解決方法

  編程思想:

  首先將放入需要放入列表框中的數據從數據庫下載到XML數據島中;

  使用Javascript將查詢條件與數據島中每一項進行對比,把符合條件的放入列表框中;

  這樣即可實現不刷新頁面篩選數據庫中的內容。

  其缺點是不具備實時性。

  實現:

  下面以SQL Server為例,篩選NorthWind庫中Employees表的雇員名進行說明。

  <Html>
  <head>
  <title>不刷新頁面查詢的方法</title>
  <meta http-equiv="Content-Type" content="text/Html; charset=gb2312">
  </head>
  <script language="Javascript">
  <!--初始化,將數據島中數據裝入列表框中-->
  function loadinsel()
  {
   var employeeid,employeelastname;          //分別存放雇員ID和雇員名字
   root=document.all.XMLemployees.childNodes.item(0); //返回第一個元素--employee
   for(i=0;i<root.childNodes.length;i++){
    getnode=root.childNodes(i);            //得到empolyee的一個子節點
   employeeid=root.childNodes(i).getAttribute("emid");//得到雇員ID
   for(j=0;j<getnode.childNodes.length;j++){
  employeeinf=getnode.childNodes(j).nodeName;
  if(employeeinf=="lastname"){
   employeelastname=getnode.childNodes(j).text; //得到雇員名字
  }
  }
   //將得到的employeeid和employeelastname寫進select中
  if(employeeid!="" && employeelastname!=""){
  option1=document.createElement("option");
  option1.text=employeelastname;
  option1.value=employeeid;
  employeelist.add(option1);
  } 
   }
  }
  <!--初始化,從數據島中檢索數據,裝入列表框中-->
  function findemployee(){
   var employeelastname,employeeid;               //分別存放雇員名字和雇員ID
  employeelastname="";
  employeeid="";
   findtext=window.findcontent.value;              //得到檢索條件
  //清除列表框
  employeecount=employeelist.length
  for(i=employeecount-1;i>=0;i--){
  employeelist.remove(i);
  }
   root=window.XMLemployees.childNodes(0);
  for(i=0;i<root.childNodes.length;i++){
  getitem=root.childNodes(i);                //得到empolyee的一個子節點
   employeeid=root.childNodes(i).getAttribute("emid");    //得到雇員ID
   for(j=0;j<getitem.childNodes.length;j++){
   if(getitem.childNodes(j).nodeName=="lastname"){
  employee_temp=getitem.childNodes(j).text;
   if(employee_temp.indexOf(findtext)!=-1){      //查找匹配項
  employeelastname=employee_temp;         //找到名字匹配的雇員
  }
  }
   }
  //將符合條件的雇員信息寫進select中
  if(employeeid!="" && employeelastname!=""){
  option1=document.createElement("option");
  option1.value=employeeid;
  option1.text=employeelastname;
  window.employeelist.add(option1);
  employeeid="";
  employeelastname="";
  } 
  }
  }
  </script>
  <body bgcolor="#FFFFFF" text="#000000" onload="Javascript:loadinsel()">
  <table width="80%" border="1">
  <tr>
  <td> 請輸入查詢條件:
  <input type="text" name="findcontent">
  <input type="button" name="Submit" value="查找" onclick="Javascript:findemployee()">
  </td>
  </tr>
  <tr>
  <td> 查詢結果:
  <select name="employeelist">
  </select>
  </td>
  </tr>
  </table>
  <?XML version="1.0" encoding="gb2312"?>
  <%
  servername="wyb"      '服務器名
  user="sa"          '用戶名     
  pw=""            '用戶密碼
  databasename="northwind"  '數據庫名
  set conn=server.CreateObject("adodb.connection") 
  conn.Open "DRIVER=SQL Server;SERVER="&servername&";UID="&user&";pwd="&pw&";DATABASE="&databasename
  set rs=server.CreateObject("adodb.recordset")
  sql="Select employeeid,lastname from employees order by employeeid"
  rs.Open sql,conn%>
  <!--將數據庫中信息放入數據島中-->
  <xml id="XMLemployees">
  <employee>
  <%do while not rs.eof%>
  <employeeitem emid="<%=rs("employeeid")%>">
  <lastname><%=rs("lastname")%></lastname>
  </employeeitem>
  <%rs.movenext%>
  <%loop%>
  </employee> </XML>
  <%rs.close
  set rs=nothing
  %>
  </body>
  </Html>


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved