60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Extract and Read XML Data Using jQuery and Ajax</title>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
||
|
|
<style>
|
||
|
|
#books {
|
||
|
|
font:12px Arial;
|
||
|
|
width:500px;
|
||
|
|
text-align:center;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
#books div {
|
||
|
|
width:auto;
|
||
|
|
text-align:left;
|
||
|
|
margin:1px;
|
||
|
|
padding:2px 5px;
|
||
|
|
letter-spacing:1px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<p>Click the button to extract data from an XML file and display!</p>
|
||
|
|
|
||
|
|
<input type="button" value="Click it!" id="bt" />
|
||
|
|
<div id="books"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
|
||
|
|
$('#bt').click(function () {
|
||
|
|
$('#books').empty(); // Clear the DIV.
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: 'sprawdziany/testy.xml', // The file path.
|
||
|
|
dataType: 'xml',
|
||
|
|
success: function(xml) {
|
||
|
|
$(xml).find('List').each(function() {
|
||
|
|
|
||
|
|
// Append new data to the DIV element.
|
||
|
|
$('#books').append(
|
||
|
|
'<div>' +
|
||
|
|
'<div><b>Nazwa sprawdzianu: </b>' +
|
||
|
|
$(this).find('Sprawdzian').text() + '</div> ' +
|
||
|
|
'<div><b>Godzina i data: </b>' +
|
||
|
|
$(this).find('Godz').text() + '</div> ' +
|
||
|
|
'<div><b>Miejsce: </b>' +
|
||
|
|
$(this).find('Klasa').text() + '</div> ' +
|
||
|
|
'</div>');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|