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 themy 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 hiddencode 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",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. Addclick functionin head
$("#btn3").click(function () {
$.ajax({
url: "3.xml",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",success: function (data) {
$("#myDiv").load("1.html .right");
}
});
//$("#myDiv").load("1.html .right");
return false;
});
$("#btn2").click(function() {
/*
$.getJSON("2.json",key) {
html += "<div>" + key.name + "</div>";
html += "<div>" + key.number + "</div>";
});
$("#myDiv").append(html) ;
}
});
return false;
});
$("#btn3").click(function () {
$.ajax({
url: "3.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