我在作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>
分享到:
相关推荐
在本资源中,我们将详细介绍如何使用AJAX技术来实现无页面刷新对数据库数据的访问。 AJAX技术的基本原理 AJAX技术的核心是使用JavaScript语言和XMLHttpRequest对象来实现异步数据交互。当用户与Web应用程序交互时...
在ASP.NET中,为了提供更好的用户体验,有时我们需要避免频繁地刷新页面以查询数据库,这通常通过使用Ajax(Asynchronous JavaScript and XML)技术来实现。AjaxPro是ASP.NET中的一种Ajax扩展库,它允许我们在客户端...
Ajax(Asynchronous JavaScript and XML)允许前端页面在不刷新整个页面的情况下与服务器进行异步通信,提供更流畅的用户体验。在这里,Ajax可能用于以下场景: 1. **实时反馈**:用户上传XML文件后,使用Ajax发送...
在基于 Hibernate 的 Web 应用程序中,遇到添加数据后刷新页面,数据库更新但是前台页面不更新的问题是一种常见的困扰开发者的问题。这个问题的根源在于 Hibernate 的缓存机制和数据库的外键关系。 解决这个问题的...
ASP.NET中的Ajax Control Toolkit和UpdatePanel等工具,可以帮助开发者轻松实现无刷新页面和数据更新。 **Default7.aspx、Web.Config、Default7.aspx.cs** 这些文件是ASP.NET Web应用程序的组成部分: - `Default7...
"JSP数据库数据AJAX无刷新分页"是一个常见的技术实现,它结合了JavaServer Pages(JSP)、数据库技术、Ajax(Asynchronous JavaScript and XML)以及前端分页组件,为用户提供了一种无需整个页面刷新即可获取并显示...
AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的...论文提出了基于AJAX的Web无刷新页面快速更新数据的方法,并通过实例展示了该方法在实际Web应用中的应用与实践。
1. **XML与数据库的链接**:XML可以作为数据库查询结果的载体,通过XSLT(XML Stylesheet Language Transformation)转换,将数据库数据以XML格式展示。此外,通过XPath或XQuery,可以检索XML文档中的特定数据,实现...
Ajax允许在不刷新整个页面的情况下与服务器通信,只更新部分DOM元素,从而实现了无刷新效果。 在前端,可能有一个JSON或XML格式的API接口,用于返回对应国家的地区数据。当JavaScript接收到这些数据后,动态创建或...
在IT行业中,数据库查询是应用开发中的核心环节,特别是在大型数据集的情况下,高效的数据检索和展示至关重要。Ajax(Asynchronous JavaScript and XML)技术为实现页面的无刷新更新提供了可能,结合数据库分页技术...
AJAX更新/插入/删除数据”这个主题中,我们将深入探讨如何利用jQuery、ASP(Active Server Pages)和数据库(例如Access)来实现在不刷新页面的情况下进行数据的动态更新、插入和删除,从而提升用户体验,让人充分...
4. JSP和XML的整合:如何在JSP页面中读取和写入XML数据,以及使用XPath和XSLT处理XML数据。 5. Ajax技术:如何使用XMLHttpRequest对象进行异步请求,以及XML数据在Ajax中的应用。 6. 安全和性能优化:讨论如何避免...
**Ajax-XML-ASP.NET 读存数据基础代码解析** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术常用于实现页面的无刷新更新,提高用户体验。此压缩包中的代码示例着重展示了如何在ASP.NET环境中利用Ajax与...
本文将深入探讨如何使用jQuery库来实现在不刷新页面的情况下对数据库进行操作,结合ASP(Active Server Pages)脚本,为用户带来流畅的交互体验。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML...