javascript 异步页面查询实现代码(asp.net)


Posted in Javascript onMay 26, 2010

1。 testlist.aspx页面:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link rel="stylesheet" href="jscript/autoSuggest.css" type="text/css"/> 
<link rel="stylesheet" href="jscript/ac.css" type="text/css"/> 
<script language="Javascript" src="jscript/autoSuggest.js"></script> 
<script language="Javascript" src="jscript/ac.js"></script> 
function ACClient( queryurl, width, objInput, objLable ) 
{ 
this.xmldom = getXmlhttp(); 
this.queryurl = queryurl; 
this.prolist = new Array(); 
this.divwidth = width; 
this.objInput = objInput; 
this.getEligible = function(ac) { 
var eligible = new Array(); 
if (ac.inputText.length < 1) { 
document.getElementById(objInput.name).value = ""; 
document.getElementById(objLable.name).value = ""; 
return eligible; 
} 
var strURL = this.queryurl + escape(ac.inputText) + "&rand=" + Math.random(); 
this.xmldom.open("GET", strURL, false); 
try { 
this.xmldom.send(); 
} 
catch (e) { 
return; 
} 
this.prolist = this.xmldom.responseXML.documentElement.selectNodes("/duxion/object"); 
if (0 == this.prolist.length) { 
return eligible; 
} 
for (var i = 0; i < this.prolist.length; i++) { 
if (i > 15) 
break; 
var node = this.prolist.item(i); 
eligible[eligible.length] = node.getAttribute("fullcontent"); 
} 
ac.div.style.width = this.divwidth; 
return eligible; 
}; 
this.useSuggestion = function( sel ) 
{ 
if( sel>=0 ) 
{ 
var node = this.prolist.item(sel); 
if(typeof(node.getAttribute( "value" )) != "undefined") 
document.getElementById(objInput.name).value = node.getAttribute( "value" ); 
else 
document.getElementById(objInput.name).value = ""; 
if(typeof(node.getAttribute( "content" )) != "undefined") 
document.getElementById(objLable.name).value = node.getAttribute( "content" ); 
else 
document.getElementById(objLable.name).value = ""; 
if (this.objInput.name == "hidfreq_code") { 
document.getElementById("txtfreq_name").value = node.getAttribute("Name"); 
document.getElementById("hidfreq_code").value = node.getAttribute("Code"); 
} 
} 
}; 
return this; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<%--div 用于显示下拉查询部分--%> 
<div id="autosuggest" style="width:160px;font-size:12px;"><ul></ul></div> 
<div> 
<asp:TextBox ID="txtfreq_name" CssClass="needtext" runat="server" Width="100px"></asp:TextBox><asp:HiddenField 
ID="hidfreq_code" runat="server" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
new AutoSuggest(document.getElementById('txtfreq_name'), 
new ACClient("testXml.aspx?tag=yp_frequency&value=", "200px", document.getElementById('hidfreq_code'), document.getElementById('txtfreq_name'))); 
</script>

2。 供查询的xml的testxml.aspx.cs文件
public partial class testXml : BaseForm 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
ListXmlData(); 
} 
private string[] arrwidth; 
private string[] arrfield; 
public string fieldlist = "区域Id,区域名,区域编码,区域层次"; 
public string coloumwidth = "60,10,20,30"; 
//显示xml格式数据 
private void ListXmlData() 
{ 
//各字段的宽度 
string strwhere=""; 
if (Request["value"] != null) 
{ 
strwhere = string.Format(" and Code like '{0}%'", Request["value"].ToString()); 
} 
arrfield = fieldlist.Split(','); 
arrwidth = coloumwidth.Split(','); 
DataTable dtList = new Districts().Search("1=1" + strwhere);// dis // SqlHelper.GetTable(subsys_db, CommandType.Text, strsql, null); 
int list_cols = dtList.Columns.Count; //字段数 
int list_rows = dtList.Rows.Count; //记录数 
string listlable = ""; //显示内容 
XmlDocument xmldoc = new XmlDocument(); 
XmlDeclaration dec = xmldoc.CreateXmlDeclaration("1.0", "gb2312", null); 
xmldoc.InsertBefore(dec, xmldoc.FirstChild); 
XmlElement root = xmldoc.CreateElement("duxion"); 
xmldoc.AppendChild(root); 
//显示表头 
if (list_rows > 0) 
{ 
XmlElement objtitle = xmldoc.CreateElement("object"); 
for (int k = 0; k < list_cols; k++) 
{ 
listlable += "<span style='width:" + arrwidth[k] + ";text-align:center;font-weight:bold;color:#000000;padding-top:2px;'>" + arrfield[k] + "</span>"; 
if (k == arrfield.Length - 1) 
break; 
} 
objtitle.SetAttribute("fullcontent", listlable); 
root.AppendChild(objtitle); 
} 
//显示表头 
//显示数据 
for (int i = 0; i < list_rows; i++) 
{ 
listlable = ""; 
DataRow drList = dtList.Rows[i]; 
XmlElement obj = xmldoc.CreateElement("object"); 
for (int j = 0; j < list_cols; j++) 
{ 
obj.SetAttribute(dtList.Columns[j].ColumnName, drList[j].ToString()); 
if (j <= arrfield.Length - 1) 
{ 
//listlable += "<span style='width:" + arrwidth[j] + "'>" + GetLeftString(drList[j].ToString(), Convert.ToInt16(arrwidth[j])) + "</span>"; 
listlable += "<span style='width:" + arrwidth[j] + "'>" + formatXmlNode(dtList.Columns[j].DataType.ToString(), drList[j].ToString()) + "</span>"; 
} 
} 
obj.SetAttribute("fullcontent", listlable); 
root.AppendChild(obj); 
} 
//显示数据 
//Response.ContentType = "text/xml;charset=utf-8"; 
//Response.ContentType = "text/xml;charset=gb2312"; 
Response.ContentEncoding = System.Text.Encoding.Default; 
Response.ContentType = "text/xml"; 
Response.Clear(); 
Response.Write(xmldoc.OuterXml); 
Response.End(); 
} 
private string formatXmlNode(string field_type, string field_value) 
{ 
string return_value = field_value.Trim(); 
switch (field_type) 
{ 
case "System.Double": 
case "System.Decimal": 
return_value = string.Format("{0:0.###}", Convert.ToDouble(return_value)); 
break; 
} 
return return_value; 
} 
}

3.效果图:
javascript 异步页面查询实现代码(asp.net)
4。 另外的.js以及.css文件见附件
Javascript 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 #Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 #Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 #Javascript
jQuery select操作控制方法小结
May 26 #Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 #Javascript
JQuery 动态扩展对象之另类视角
May 25 #Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 #Javascript
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
房产委托公证书样本
2014/04/04 职场文书
中学生家长评语大全
2014/04/16 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
小学见习报告
2014/10/31 职场文书
实习科室评语
2015/01/04 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Python获取字典中某个key的value
2022/04/13 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript