通过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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JavaScript验证知识整理
Mar 24 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
详谈PHP编码转换问题
2015/07/28 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
带薪年假请假条
2014/02/04 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
2014年销售工作总结
2014/12/01 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android