通过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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 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
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
如何手工释放资源
2013/12/15 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python