通过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访问XML数据的实例
Dec 27 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
原生js+css实现tab切换功能
Sep 17 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
php define的第二个参数使用方法
2013/11/04 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python去掉字符串中空格的方法
2014/03/11 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
房地产营销策划方案
2014/02/08 职场文书
动员大会主持词
2014/03/20 职场文书
避暑山庄导游词
2015/02/04 职场文书
诚信考试主题班会
2015/08/17 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python