通过AJAX的JS、JQuery两种方式解析XML示例介绍


Posted in Javascript onSeptember 23, 2013

JQuery版

$.ajax({ 
url : "order/order_orderDetail.do?params.type=merge", 
type : "post", 
data : params, 
success : function(xml) { 
hide(); 
if(xml == ""){ 
Dialog.popTip("找不到需要合并的订单", 2); 
}else{ 
var myTable=document.getElementById( "t_product" ); 
//遍历"ORDER"节点 
$(xml).find('ORDER').each(function(){ 
var id = $(this).find("ORDERID").text(); 
var status = $(this).find("STATUS").text(); if(status == "1"){ 
status="未确认"; 
}else{ 
status="已确认"; 
} 
var newRow = myTable.insertRow(); 
var oCell = newRow.insertCell(); 
oCell.setAttribute("height","25"); 
oCell.innerHTML=" "; 
oCell = newRow.insertCell(); 
oCell.innerHTML="*<b>订单<span style=\"color:red\">"+id+"</span> 的状态为:<span style=\"color:red\">"+status+"</span></b>,商品情况如下<input type=\"checkbox\" name=\"mOrder\" value="+id+" onclick=\"mergeOrder();\">"; 
oCell = newRow.insertCell(); 
oCell.innerHTML=" "; 
oCell = newRow.insertCell(); 
oCell.innerHTML=" "; 
//遍历"PRODUCT"节点 
$(this).find('PRODUCT').each(function(){ 
var pid = $(this).find("PRODUCTID").text(); 
var pname = $(this).find("PRODUCTNAME").text(); 
var purl = $(this).find("PRODUCTURL").text(); 
var pprice = $(this).find("PRICE").text(); 
var pcount = $(this).find("GOODSCOUNT").text(); 
newRow = myTable.insertRow(); 
oCell = newRow.insertCell(); 
oCell.setAttribute("height","25"); 
oCell.innerHTML=pid; 
oCell = newRow.insertCell(); 
oCell.innerHTML="<a href=\""+purl+"\" target=\"_blank\">"+pname+"</a>"; 
oCell = newRow.insertCell(); 
oCell.innerHTML="<img style=\"cursor: pointer; vertical-align: middle\" src=\"./images/-.png\" onclick=\"return plus('p"+pid+"','"+pprice+"')\" /><input style=\"width: 20px; border: 0; text-align: center;\" type=\"text\" id=\"p"+pid+"\" name=\"order.count\" class=\"txt\" value="+pcount+" readonly /><img style=\"cursor: pointer; vertical-align: middle\" src=\"./images/+.png\" onclick=\"return add('p"+pid+"','"+pprice+"')\">" 
oCell = newRow.insertCell(); 
oCell.innerHTML=pprice; 
}); 
}); 
} 
}, 
error : function() { 
hide(); 
Dialog.popTip("服务器繁忙", 2); 
} 
});

JS版
if(xmlHttp.readyState ==4){ 
if(xmlHttp.status ==200){ 
hide(); 
var xml = xmlHttp.responseXML; 
if(xml == null){ 
Dialog.popTip("找不到需要合并的订单", 2); 
}else{ 
var myTable=document.getElementById("t_product" ); 
var orders = xml.getElementsByTagName("ORDER"); 
for(var i=0;i<orders.length;i++){ 
var order = orders[i]; 
var id = order.getElementsByTagName("ORDERID")[0].childNodes[0].nodeValue; 
var status =order.getElementsByTagName("STATUS")[0].childNodes[0].nodeValue; 
alert(status); 
if(status == "1"){ 
status="未确认"; 
}else{ 
status="已确认"; 
} 
var newRow = myTable.insertRow(); 
var oCell = newRow.insertCell(); 
oCell.setAttribute("height","25"); 
oCell.innerHTML=" "; 
oCell = newRow.insertCell(); 
oCell.innerHTML="*<b>订单<span style=\"color:red\">"+id+"</span> 的状态为:<span style=\"color:red\">"+status+"</span></b>,商品情况如下<input type=\"checkbox\" name=\"mOrder\" value="+id+" onclick=\"mergeOrder();\">"; 
oCell = newRow.insertCell(); 
oCell.innerHTML=" "; 
oCell = newRow.insertCell(); 
oCell.innerHTML=" "; var products = order.getElementsByTagName("PRODUCT"); 
for(var i=0;i<orders.length;i++){ 
var product = products[i]; 
var pid = product.getElementsByTagName("PRODUCTID")[0].childNodes[0].nodeValue; 
var pname = product.getElementsByTagName("PRODUCTNAME")[0].childNodes[0].nodeValue; 
var purl = product.getElementsByTagName("PRODUCTURL")[0].childNodes[0].nodeValue; 
var pprice = product.getElementsByTagName("PRICE")[0].childNodes[0].nodeValue; 
var pcount = product.getElementsByTagName("GOODSCOUNT")[0].childNodes[0].nodeValue; 
newRow = myTable.insertRow(); 
oCell = newRow.insertCell(); 
oCell.setAttribute("height","25"); 
oCell.innerHTML=pid; 
oCell = newRow.insertCell(); 
oCell.innerHTML="<a href=\""+purl+"\" target=\"_blank\">"+pname+"</a>"; 
oCell = newRow.insertCell(); 
oCell.innerHTML="<img style=\"cursor: pointer; vertical-align: middle\" src=\"./images/-.png\" onclick=\"return plus('p"+pid+"','"+pprice+"')\" /><input style=\"width: 20px; border: 0; text-align: center;\" type=\"text\" id=\"p"+pid+"\" name=\"order.count\" class=\"txt\" value="+pcount+" readonly /><img style=\"cursor: pointer; vertical-align: middle\" src=\"./images/+.png\" onclick=\"return add('p"+pid+"','"+pprice+"')\">" 
oCell = newRow.insertCell(); 
oCell.innerHTML=pprice; 
} 
} 
} 
} 
}
Javascript 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
js创建数组的简单方法
Jul 27 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
js如何取消事件冒泡
Sep 23 #Javascript
页面载入结束自动调用js函数示例
Sep 23 #Javascript
往光标所在位置插入值的js代码
Sep 22 #Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 #Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 #Javascript
JS 毫秒转时间示例代码
Sep 22 #Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php和asp语法上的区别总结
2019/05/12 PHP
javascript radio 联动效果
2009/03/04 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
python图像处理之镜像实现方法
2015/05/30 Python
给Python入门者的一些编程建议
2015/06/15 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python 对象和json互相转换方法
2018/03/22 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
pytorch实现查看当前学习率
2020/06/24 Python
python中加背景音乐如何操作
2020/07/19 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
规划编制实施方案
2014/03/15 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
个人安全生产责任书
2014/07/28 职场文书
个人收入证明模板
2014/09/18 职场文书
个人先进材料范文
2014/12/30 职场文书
皇城相府导游词
2015/02/06 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
django中websocket的具体使用
2022/01/22 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python