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 相关文章推荐
jquery 面包屑导航 具体实现
Jun 05 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
js实现验证码干扰(动态)
Feb 23 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 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
JS backgroundImage控制
2009/05/19 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python 绘制国旗的示例
2020/09/27 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
函授毕业自我鉴定
2013/12/19 职场文书
便利店的创业计划书
2014/01/15 职场文书
活动总结书
2014/05/08 职场文书
雷人标语集锦
2014/06/19 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
邀请函怎么写
2015/01/30 职场文书
工作能力自我评价2015
2015/03/05 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
MySql分区类型及创建分区的方法
2022/04/13 MySQL