1. how to loading HTML/JSON/XML dataType via AJAX
As we know, we can dynamic loading the file via ajax, it is very convient for customer.
And, there are three kinds of dataType: JSON, XML, HTML. but the method to call file is different, here is the my demo.
This is my demo indx page.
this is code of the Index:
<html>
<body>
<h2>This is AJAX Example</h2>
<button type="button" id="btn">post html file</button>
<button type="button" id="btn2">post json file </button>
<button type="button" id="btn3">post xml file</button>
<br/>
<br/>
<div id="myDiv">This is ajax result</div>
</body>
</html>
Note: Because I had use two kind of methods to call the AJAX, then hidden code is equal to the $.ajax({}) function, it means you use the hidden code instead of the $.ajax({}) function.
2. Dynamic loading html file.
a.Create a html file to store some div, this will load in index page:
<div class="right">This is html</div>
<div>This is html number two</div>
<div>This is html number three</div>
b. add script code in head tag
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function () {
$.ajax({
url:"1.html",
type: "get",
dataType:"html",
success: function (data) {
$("#myDiv").load("1.html .right");
}
});
//$("#myDiv").load("1.html .right");
return false;
});
</head>
c. Run the index page and click the button named "post html file", here is the result:
2. Dynamic loading JSON file.
a. Create a json file extend name is 2.json
[
{
"name":"Tristan" ,
"number":"001"
},
{
"name":"Tristan2" ,
"number":"003"
},
{
"name":"Tristan3" ,
"number":"002"
}
]
b. Add click event to head
$("#btn2").click(function() {
/*
$.getJSON("2.json", function(data) {
var html = "";
$.each(data, function(index, key) {
html += "<div>" + key.name + "</div>";
html += "<div>" + key.number + "</div>";
});
$("#myDiv2").append(html);
});
*/
$.ajax({
url: "2.json",
type: "get",
dataType:"json",
success: function (data) {
var html = "";
$.each(data, function (index, key) {
html += "<div>" + key.name + "</div>";
html += "<div>" + key.number + "</div>";
});
$("#myDiv").append(html) ;
}
});
return false;
});
c. Click the button named "psot json file" and get the result:
2. Dynamic loading XML file.
a. Create a xml file extend name 3.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>
b. Add click function in head
$("#btn3").click(function () {
$.ajax({
url: "3.xml",
type: "get",
dataType:"xml",
success: function (data) {
$(data).find("book").each(function () {
html = "";
html += "<div>" + $(this).find("title").text() + "</div>";
$("#myDiv").append(html);
});
}
});
/*
$.get("3.xml", function (data) {
$(data).find("book").each(function () {
html = "";
html +="<div>" + $(this).find("title").text() + "</div>";
$("#myDiv3").append(html);
});
})
*/
return false;
});
c. The result:
2. here is the completed code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function () {
$.ajax({
url:"1.html",
type: "get",
dataType:"html",
success: function (data) {
$("#myDiv").load("1.html .right");
}
});
//$("#myDiv").load("1.html .right");
return false;
});
$("#btn2").click(function() {
/*
$.getJSON("2.json", function(data) {
var html = "";
$.each(data, function(index, key) {
html += "<div>" + key.name + "</div>";
html += "<div>" + key.number + "</div>";
});
$("#myDiv2").append(html);
});
*/
$.ajax({
url: "2.json",
type: "get",
dataType:"json",
success: function (data) {
var html = "";
$.each(data, function (index, key) {
html += "<div>" + key.name + "</div>";
html += "<div>" + key.number + "</div>";
});
$("#myDiv").append(html) ;
}
});
return false;
});
$("#btn3").click(function () {
$.ajax({
url: "3.xml",
type: "get",
dataType:"xml",
success: function (data) {
$(data).find("book").each(function () {
html = "";
html += "<div>" + $(this).find("title").text() + "</div>";
$("#myDiv").append(html);
});
}
});
/*
$.get("3.xml", function (data) {
$(data).find("book").each(function () {
html = "";
html +="<div>" + $(this).find("title").text() + "</div>";
$("#myDiv3").append(html);
});
})
*/
return false;
});
});
</script>
</head>
<body>
<h2>This is AJAX Example</h2>
<button type="button" id="btn">post html file</button>
<button type="button" id="btn2">post json file </button>
<button type="button" id="btn3">post xml file</button>
<br/>
<br/>
<div id="myDiv">This is ajax result</div>
</body>
</html>
More to link: http://www.w3school.com.cn/ajax/index.asp