xml分页+ajax请求数据源+dom取结果实例代码


Posted in Javascript onOctober 31, 2008

效果图如下:
xml分页+ajax请求数据源+dom取结果实例代码
解决思路:
1.单击[选择]时,根据当前选择(下拉框)的分类ID,使用ajax请求,取得数据源(服务端使用dataSet.getXml()输出,因为数据量不是很大,所以就偷懒了)
2.客户端使用xml数据岛分页显示(使用数据岛分页比较简单,不用写太多的代码)
3.搜索时,根据当前选择(下拉框)的分类ID,和搜索关键字,重新使用ajax请求(好像也可以使用xml的结果过滤,但为了方便,重新请求算了),跳到第2步显示
4.取数据时,单击某行时,使用onclick事件,把当前行的tr做为参数,使用dom操作就可以得到tr里的td的值
附:由于没考虑到其它细节的问题,所以代码有点乱,希望各位能多多指导,各位的批评就是我进步的最好的捷径.谢谢
贴出全部代码,希望能和大家相互交流一下
index.html 显示页面:
<select id="productID" onchange="changeID()" NAME="productID">
<option value="1" selected>1111</option>
<option value="2">2222</option>
<option value="3">3333</option>
</select><br>
<table>
<tr>
<td><input id="selectValue" type="text" size="40"></td><td><a href='#' onclick='show()'><img src='img/btnSelect.gif' /></a></td>
</tr>
</table>
<div id="selectData"></div>
<input id="abc" type="text" size="50%" />
data.js 所有操作js代码
var xmlHttp;
var xmlContent; //ajax请求后返回保存的数据
var key = "";
var id = "";
//---------------------样式设置------------------//
var divid = "selectData" //说明第4步
var txtValueID = "selectValue"; //说时第2步
var fieldNames = new Array(3); //单击某行取值是,每列值前添加一个该值列名
var isShowFieldNames = true; //取值时,是否要显示列名 true为显示,false不显示
fieldNames[0]="编号:";
fieldNames[1]="用户名:";
fieldNames[2]="密码:";
var pageSize = 10; //每页显示行数
var onmouseoverBG = "#DDFFEC"; //鼠标移上去该行的背景颜色
var onmouseoutBG = "#ffffff"; //鼠标离开后该行的背景颜色
//表头列名根据需要修改
var tableHead = "<thead style='background: #DDFFEC;'>";
tableHead += "<th>编号</th>";
tableHead += "<th>用户名</th>";
tableHead += "<th>密码</th>";
tableHead += "</thead>";
//数据绑定字段名,修改DATAFLD里的的字段名
var dataFiled = "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_id'></div></td>";
dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_userName'></div></td>";
dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_passWord'></div></td>";
var RequestFile = "getXml1.aspx"; //请求页面
//-------------------外部调用--------------------------//
//显示选择
//productID是下拉框ID,请根据需要修改
function show()
{
$(divid).style.display = ''
$(divid).style.position="absolute"
$(divid).style.backgroundColor="#FFFFFF"
key = "";
id = productID.options[productID.selectedIndex].value;
RequestXML();
}
//分类改变时隐藏
function changeID()
{
hide();
}
//---------------------内部方法,一般不用修改---------------------------//
//选择某行的值,显示到文本框
function getCurrentRowData(tr)
{
var tds = tr.getElementsByTagName("td") //得到所有列
var result="";
for(var i = 0; i < tds.length; i++)
{
if(isShowFieldNames){result += fieldNames[i]};
if(i != tds.length -1 )//是否是最后一列
{
result += tr.getElementsByTagName("div")[i].firstChild.nodeValue + ","; //得到第i列的值 + ","
}
else
{
result += tr.getElementsByTagName("div")[i].firstChild.nodeValue; //得到第i列的值
}
}
$(txtValueID).value = result;
hide();
}
//显示内容
function ShowData()
{
var data = $(divid);
var content = "<div id=\"main\" style='border: 1px solid #009966;width:300px;font-size:13px';>";
content += "<div id=\"searchMain\">";
content += "<table><tr><td><input style='border: 1px solid #B9E2CC;' id=\"key\" type=\"text\" /></td><td><a href='#' onclick='Search()'><img style='border:0px;' src='img/btnSearch.gif' /></a></td><td><a href='#' onclick='hide()'><img style='border:0px' src='img/btnCancel.gif' /></a></td></tr></table>";
content += "</div>";
content += "<xml id=\"data_souce\">" + xmlContent + "</xml>";
content += "<div id='resultxml'>"
//----------------翻页操作-----------------------//
content += "<table CELLPADDING=0 CELLSPACING=0 width='100%'><tr><td>"
content += "<a href=\"#\" onclick=\"GotoPage('first')\"><img style='border:0px;' src='img/btnFirst.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('previous')\"><img style='border:0px;' src='img/btnPrevious.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('next')\"><img style='border:0px;' src='img/btnNext.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('last')\"><img style='border:0px;' src='img/btnLast.gif'/></a>";
content += "</td>"
content += "<td align='rigth' style='font-size:13px'><span style='color:red' id='page'>1</span><span id='compart'></span><span id='pages'></span>"
content += "</td></tr></table>"
//----------------数据源-----------------------//
content += "<table style='text-align:center;font-size:13px;border: 1px solid #B9E2CC;' width='300px' CELLPADDING=0 CELLSPACING=0 id=\"datas\" DATASRC=\"#data_souce\" DATAPAGESIZE=" + pageSize + ">";
//----------------列名-----------------------//
content += tableHead;
content += "<tr style=\"cursor:hand\" onmouseover=\"this.bgColor='" + onmouseoverBG + "'\" onmouseout=\"this.bgColor='" + onmouseoutBG + "'\" onclick=\"getCurrentRowData(this)\">";
content += dataFiled;
content += "</tr>";
content += "</table>";
content += "</div>"
content += "</div>"
data.innerHTML = content;
GetPages();
}
//得到总页
function GetPages()
{
var rowCount = $("data_souce").getElementsByTagName("Table"); //得到所有table节点,得到总记录数
$("pages").innerHTML = Math.ceil(rowCount.length / pageSize);
$("compart").innerHTML = "/";
if(rowCount.length == 0)
{
$("resultxml").innerHTML = "找不到相关数据";
}
}
//首页时得到当前页
function firstPage()
{
$("page").innerHTML = 1;
}
//上页时得到当前页
function previousPage()
{
if($("page").innerHTML != "1")
{
$("page").innerHTML = parseInt($("page").innerHTML) - 1;
}
}
//下页时得到当前页
function nextPage()
{
if($("page").innerHTML != $("pages").innerHTML)
{
$("page").innerHTML = parseInt($("page").innerHTML) + 1;
}
}
//尾页时得到当前页
function lastPage()
{
$("page").innerHTML = $("pages").innerHTML;
}
//翻页操作
function GotoPage(page)
{
switch(page)
{
case "first":
{
datas.firstPage();
firstPage();
break;
}
case "previous":
{
datas.previousPage();
previousPage();
break;
}
case "next":
{
datas.nextPage();
nextPage();
break;
}
case "last":
{
datas.lastPage();
lastPage();
break;
}
}
}
//搜索
function Search()
{
key = $("key").value;
if(key == "")
{
alert("请输入搜索关键字");
return;
}
RequestXML();
}
//根据ID得到对象
function $(id)
{
return document.getElementById(id);
}
//隐藏选择
function hide()
{
$(divid).style.display ="none";
}
//创建XMLHttpRequest
function CreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//请求
function RequestXML()
{
var url = RequestFile + "?id=" + id + "&key=" + key;
CreateXMLHttpRequest();
xmlHttp.open("get",url);
xmlHttp.onreadystatechange = GetXMLResult;
xmlHttp.send(null);
}
//接收
function GetXMLResult()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
xmlContent = xmlHttp.responseText;
ShowData();
}
}
else
{
$(divid).innerHTML = "正在读取数据中";
}
}
getXml.aspx 服务端数据源
private void Page_Load(object sender, System.EventArgs e)
{
Response.Write(GetData());
Response.End();
}
private string GetData()
{
string id = Request.QueryString["id"];
string key = Request.QueryString["key"];
string sql = "select * from T_user where F_id = " + id;
if (key.Length > 0){sql += " and F_id like '%" + key + "%'or F_passWord like '%" + key + "%' or F_userName like '%" + key + "%'";}
StringBuilder sb = new StringBuilder();
sb.Append("<?xml version=\"1.0\"?>");
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=sa;database=WebTest");
conn.Open();
SqlDataAdapter da = new SqlDataAdapter(sql,conn);
DataSet ds = new DataSet();
da.Fill(ds);
conn.Close();
sb.Append(ds.GetXml());
return sb.ToString();
}

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
JS Array对象入门分析
Oct 30 #Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 #Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 #Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 #Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
js身份证验证超强脚本
Oct 26 #Javascript
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php 删除cookie方法详解
2014/12/01 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python实现的系统实用log类实例
2015/06/30 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python机器学习库常用汇总
2017/11/15 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python实现多进程代码示例
2018/10/31 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
2014年精神文明建设工作总结
2014/11/19 职场文书
心得体会格式及范文
2016/01/25 职场文书
Python学习之迭代器详解
2022/04/01 Python