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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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中break及continue两个流程控制指令区别分析
2011/04/18 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python 实现两个线程交替执行
2020/05/02 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
新护士岗前培训制度
2014/02/02 职场文书
社区消防工作实施方案
2014/03/21 职场文书
廉洁校园实施方案
2014/05/25 职场文书
业务员辞职信范文
2015/03/02 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python