通过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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
webpack入门必知必会
Jan 16 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
基于php实现的验证码小程序
2016/12/13 PHP
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
js module大战
2019/04/19 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
python提示No module named images的解决方法
2014/09/29 Python
深入解析Python中的线程同步方法
2016/06/14 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python 元类实例解析
2018/04/04 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python 函数返回值的示例代码
2019/03/11 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python configparser模块常用方法解析
2020/05/22 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
法律专业自我鉴定
2013/10/03 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
拓展训练激励口号
2014/06/17 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python