通过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 相关文章推荐
js对象的比较
Feb 26 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
ES6函数实现排它两种写法解析
May 13 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
深入分析php之面向对象
2013/05/15 PHP
php调用shell的方法
2014/11/05 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
民事诉讼代理委托书
2014/10/08 职场文书
民主生活会汇报材料
2014/12/15 职场文书
安全员岗位职责
2015/02/10 职场文书
食品安全责任书范本
2015/05/09 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers