Description:
Welcome to Jqueryjohn.com.
Make sure the Xml file which we are going to
read it’s free of errors.
When the document is ready, use AJAX request
to read and Get the values of the Xml data.
$.ajax({
type: "GET",
url: "JQueryJohn.xml",
dataType: "xml",
success: function
(response) {
},
error: function
() {
alert("Failure");
}
});
Specify type as ‘GET’ and datatype as
‘xml’.
Success parameter takes the data from the
xml file.
success: function
(response) {
$(response).find('Tutorials').each(function
() {
var
lesson = $(this).find('Lesson').text();
var
author = $(this).find('Author').text();
});
}
Use find() method, read each node and
get the values.
Example program:
JQueryJohn.xml:
<?xml version="1.0" encoding="utf-8" ?>
<JQueryJohn.com>
<Tutorials>
<Lesson>Introduction
and Fundamentals of JQuery</Lesson>
<Author>JQueryJohn</Author>
</Tutorials>
<Tutorials>
<Lesson>Selectors
and Attributes in JQuery</Lesson>
<Author>JQueryJohn</Author>
</Tutorials>
<Tutorials>
<Lesson>Animation
and Effects in JQuery</Lesson>
<Author>JQueryJohn</Author>
</Tutorials>
<Tutorials>
<Lesson>Events
and Methods in JQuery</Lesson>
<Author>JQueryJohn</Author>
</Tutorials>
<Tutorials>
<Lesson>AJAX
with JQuery</Lesson>
<Author>JQueryJohn</Author>
</Tutorials>
</JQueryJohn.com>
ReadXMLData.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnReadGetXmlFile').click(function () {
$.ajax({
type: "GET",
url: "JQueryJohn.xml",
dataType: "xml",
success: function (response) {
$("#divArea").html("<b><u>Jqueryjohn.com
contains the following lessons with code snippets</u></b><br
/>");
$(response).find('Tutorials').each(function
() {
var lesson = $(this).find('Lesson').text();
var author = $(this).find('Author').text();
$("#divArea").append('<li>' + lesson + "
, Author: " + author + '<li>');
});
},
error: function () {
alert("Failure");
}
});
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="divArea">
<asp:Button ID="btnReadGetXmlFile" runat="server"
Text="Read &
Get XML File" />
<br />
</div>
</form>
</body>
</html>
The above program reads the xml file and
updates with the page without postback via JQuery AJAX.
Read xml file using jquery, jquery to read xml file, how to read and
parse xml data, load xml file using Jquery Ajax, retrieve data from xml file
using jquery
It could be nice if you put a live demo or something to see how it works.
ReplyDeleteThanks for your suggestion. I will try to add for the upcoming posts Armando...
ReplyDelete