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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
node.js实现带进度条的多文件上传
Mar 27 Javascript
layui导出所有数据的例子
Sep 10 Javascript
微信小程序单选框自定义赋值
May 26 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php访问查询mysql数据的三种方法
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php分页代码学习示例分享
2014/02/20 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python实现队列的方法
2015/05/26 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python global和nonlocal用法解析
2020/02/03 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
庆元旦广播稿
2014/02/10 职场文书
观看信仰心得体会
2014/09/04 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
股权转让协议范本
2014/12/07 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers