在jquery中處理帶有命名空間的XML數(shù)據(jù)
更新時(shí)間:2011年06月13日 23:55:41 作者:
如果你在做AJAX應(yīng)用,則你可能經(jīng)常會(huì)用到j(luò)query(或者其他框架)處理服務(wù)返回的數(shù)據(jù)。如果用Jquery處理Json格式,將是相當(dāng)方便的。
但不幸的是,很多服務(wù)返回的數(shù)據(jù)仍然是XML格式的。
jquery對(duì)于xml這種數(shù)據(jù)的處理是內(nèi)置支持的,這一點(diǎn)沒(méi)有任何問(wèn)題。但前提是返回的數(shù)據(jù)沒(méi)有帶任何命名空間。例如下面這份數(shù)據(jù)
<?xml version="1.0" encoding="utf-8" ?>
<data>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
</data>
要處理這樣的數(shù)據(jù),jquery代碼大致如下
var div = $("#placeholder");
// 處理不帶命名空間的xml
$.get("data.xml", null, function (data) {
var employees = $("Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽,并且將其插入到ul中
});
ul.appendTo(div);
});
但如果我們的XML數(shù)據(jù)帶有命名空間,則上述代碼就會(huì)無(wú)效。原因是因?yàn)閖query默認(rèn)處理不了命名空間\
<?xml version="1.0" encoding="utf-8" ?>
<data xmlns:d="http://tech.xizhang.com">
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
</data>
為了解決這個(gè)問(wèn)題,有熱心的網(wǎng)友,編寫(xiě)了一個(gè)jquery插件,叫做jquery.xmlns.js,有興趣可以通過(guò)下面了解和下載
http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
那么,我們可以用如下的方法來(lái)解決問(wèn)題
$.xmlns["d"] = "http://tech.xizhang.com";
// 處理帶命名空間的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $("d|Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);
});
ul.appendTo(div);
});
不得不說(shuō),XML這個(gè)技術(shù)規(guī)范中的命名空間真是一個(gè)很不好的設(shè)計(jì)。增加了很多麻煩,勝過(guò)于它帶來(lái)的好處。
本文的例子完整代碼如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.xmlns.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var div = $("#placeholder");
// 處理不帶命名空間的xml
$.get("data.xml", null, function (data) {
var employees = $("Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽,并且將其插入到ul中
});
ul.appendTo(div);
});
$("<br />").appendTo(div);
$.xmlns["d"] = "http://tech.xizhang.com";
// 處理帶命名空間的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $("d|Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);
});
ul.appendTo(div);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="placeholder">
</div>
</form>
</body>
</html>
jquery對(duì)于xml這種數(shù)據(jù)的處理是內(nèi)置支持的,這一點(diǎn)沒(méi)有任何問(wèn)題。但前提是返回的數(shù)據(jù)沒(méi)有帶任何命名空間。例如下面這份數(shù)據(jù)
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<data>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
<Employee id="1" firstName="ares" lastName="chen"></Employee>
</data>
要處理這樣的數(shù)據(jù),jquery代碼大致如下
復(fù)制代碼 代碼如下:
var div = $("#placeholder");
// 處理不帶命名空間的xml
$.get("data.xml", null, function (data) {
var employees = $("Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽,并且將其插入到ul中
});
ul.appendTo(div);
});
但如果我們的XML數(shù)據(jù)帶有命名空間,則上述代碼就會(huì)無(wú)效。原因是因?yàn)閖query默認(rèn)處理不了命名空間\
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<data xmlns:d="http://tech.xizhang.com">
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee>
</data>
為了解決這個(gè)問(wèn)題,有熱心的網(wǎng)友,編寫(xiě)了一個(gè)jquery插件,叫做jquery.xmlns.js,有興趣可以通過(guò)下面了解和下載
http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
那么,我們可以用如下的方法來(lái)解決問(wèn)題
復(fù)制代碼 代碼如下:
$.xmlns["d"] = "http://tech.xizhang.com";
// 處理帶命名空間的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $("d|Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);
});
ul.appendTo(div);
});
不得不說(shuō),XML這個(gè)技術(shù)規(guī)范中的命名空間真是一個(gè)很不好的設(shè)計(jì)。增加了很多麻煩,勝過(guò)于它帶來(lái)的好處。
本文的例子完整代碼如下
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.xmlns.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var div = $("#placeholder");
// 處理不帶命名空間的xml
$.get("data.xml", null, function (data) {
var employees = $("Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽,并且將其插入到ul中
});
ul.appendTo(div);
});
$("<br />").appendTo(div);
$.xmlns["d"] = "http://tech.xizhang.com";
// 處理帶命名空間的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $("d|Employee", data); //找到所有的Employee節(jié)點(diǎn)
var ul = $("<ul />");
employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);
});
ul.appendTo(div);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="placeholder">
</div>
</form>
</body>
</html>
最后,在瀏覽器中看到的效果如下。有圖有真相
您可能感興趣的文章:
- 實(shí)例講解jQuery中對(duì)事件的命名空間的運(yùn)用
- jquery利用命名空間移除綁定事件的方法
- jQuery 事件的命名空間簡(jiǎn)單了解
- jQuery中綁定事件的命名空間詳解
- javascript,jquery閉包概念分析
- jQuery事件綁定.on()簡(jiǎn)要概述及應(yīng)用
- 關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
- jquery 事件冒泡的介紹以及如何阻止事件冒泡
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- jquery新的綁定事件機(jī)制on方法的使用方法
- jQuery的緩存機(jī)制淺析
- jQuery命名空間與閉包用法示例
相關(guān)文章
JQuery中解決重復(fù)動(dòng)畫(huà)的方法
本篇文章主要介紹了JQuery中解決重復(fù)動(dòng)畫(huà)的辦法,有分別有圖片滾動(dòng)輪播,回到頁(yè)面頂部,聯(lián)級(jí)菜單滑出,手風(fēng)琴等效果,有需要的朋友可以來(lái)看一下。2016-10-10jquery編寫(xiě)彈出信息提示條并延時(shí)滑出動(dòng)畫(huà)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了jquery編寫(xiě)彈出信息提示條并延時(shí)滑出動(dòng)畫(huà)實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08使用jQuery內(nèi)容過(guò)濾選擇器選擇元素實(shí)例講解
內(nèi)容過(guò)濾選擇器:根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素,其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位,接下來(lái)為大家詳細(xì)介紹下jQuery選擇器,感興趣的朋友可以參考下哈2013-04-04jquery的Tooltip插件 qtip使用詳細(xì)說(shuō)明
qTip是一個(gè)基于JQuery的Tooltip插件。它幾乎支持所有的主流瀏覽器。2010-09-09