jQuery基于Ajax實(shí)現(xiàn)讀取XML數(shù)據(jù)功能示例
本文實(shí)例講述了jQuery基于Ajax實(shí)現(xiàn)讀取XML數(shù)據(jù)功能。分享給大家供大家參考,具體如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %> <!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>www.dbjr.com.cn jQuery使用ajax獲取xml</title> <style type="text/css"> </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#Display").click(function () { $("#message").html(''); $.ajax({ type: "GET", url: "Friend.xml", dataType: "xml", success: function (ResponseText) { var table = "<table border='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>"; $(ResponseText).find('friend').each(function () { var first = $(this).find('firstName').text(); var last = $(this).find('lastName').text(); var city = $(this).find('city').text(); table += "<tr><td>" + first + "</td><td>" + last + "</td><td>" + city + "</td></tr>"; }) table += "</table>"; $("#message").append(table); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <label>Display My Friends</label><br /> <input type="button" value="Display" id="Display" /> <div id="message"></div> </form> </body> </html>
Friend.xml:
<?xml version="1.0" encoding="utf-8" ?> <friends> <friend> <name> <firstName>Guo</firstName> <lastName>Hu</lastName> </name> <address> <province>Shanghai</province> <city>PuDong</city> </address> </friend> <friend> <name> <firstName>Lei</firstName> <lastName>Hu</lastName> </name> <address> <province>hubei</province> <city>xiantao</city> </address> </friend> <friend> <name> <firstName>JunWen</firstName> <lastName>Li</lastName> </name> <address> <province>hubei</province> <city>wuhan</city> </address> </friend> <friend> <name> <firstName>Jinhao</firstName> <lastName>Liu</lastName> </name> <address> <province>ShanXi</province> <city>Taiyuan</city> </address> </friend> <friend> <name> <firstName>Cheng</firstName> <lastName>Fang</lastName> </name> <address> <province>GuangDong</province> <city>GuangZhou</city> </address> </friend> </friends>
運(yùn)行結(jié)果:
PS:這里再為大家提供幾款關(guān)于xml操作相關(guān)在線工具供大家參考使用:
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
在線格式化XML/在線壓縮XML:
http://tools.jb51.net/code/xmlformat
XML在線壓縮/格式化工具:
http://tools.jb51.net/code/xml_format_compress
xml代碼在線格式化美化工具:
http://tools.jb51.net/code/xmlcodeformat
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery操作xml技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
- Jquery Ajax學(xué)習(xí)實(shí)例 向頁(yè)面發(fā)出請(qǐng)求,返回XML格式數(shù)據(jù)
- jQuery+ajax讀取并解析XML文件的方法
- JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例
- 通過(guò)AJAX的JS、JQuery兩種方式解析XML示例介紹
- 用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
- jQuery 利用$.ajax 時(shí)獲取原生XMLHttpRequest 對(duì)象的方法
- JQuery Ajax通過(guò)Handler訪問(wèn)外部XML數(shù)據(jù)的代碼
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
- Jquery通過(guò)Ajax訪問(wèn)XML數(shù)據(jù)的小例子
相關(guān)文章
jquery輕量級(jí)數(shù)字動(dòng)畫(huà)插件countUp.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動(dòng)數(shù)字增加插件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JQuery魔力之$("tagName")與selector
DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡(jiǎn)單!tag標(biāo)簽(可以是:p、div、button …)標(biāo)簽本身具有ID、Class等屬性2012-03-03jquery 構(gòu)造函數(shù)在表單提交過(guò)程中修改數(shù)據(jù)
這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過(guò)程中修改數(shù)據(jù)的方法,十分簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-05-05jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery懸停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入與調(diào)用實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-07-07基于BootStrap環(huán)境寫(xiě)jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫(xiě)jQuery tabs插件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07