jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能示例
本文實例講述了jQuery基于Ajax實現(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>
運行結(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)容感興趣的讀者可查看本站專題:《jQuery操作xml技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
- Jquery Ajax學習實例 向頁面發(fā)出請求,返回XML格式數(shù)據(jù)
- jQuery+ajax讀取并解析XML文件的方法
- JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實例
- 通過AJAX的JS、JQuery兩種方式解析XML示例介紹
- 用JQuery 實現(xiàn)AJAX加載XML并解析的腳本
- jQuery 利用$.ajax 時獲取原生XMLHttpRequest 對象的方法
- JQuery Ajax通過Handler訪問外部XML數(shù)據(jù)的代碼
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡單實例
- Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
相關(guān)文章
jquery輕量級數(shù)字動畫插件countUp.js使用詳解
這篇文章主要為大家詳細介紹了jquery鼠標滾動數(shù)字增加插件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10JQuery魔力之$("tagName")與selector
DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡單!tag標簽(可以是:p、div、button …)標簽本身具有ID、Class等屬性2012-03-03jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)
這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)的方法,十分簡單實用,有需要的小伙伴可以參考下。2015-05-05jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery懸停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入與調(diào)用實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2016-07-07基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07