Introduce AJAX about how to dynamic loading HTML/JSON/XML dataType

最新推荐文章于 2017-11-10 10:57:53 发布

Tristan_Dong

最新推荐文章于 2017-11-10 10:57:53 发布

阅读量1.9k

点赞数

分类专栏： jQuery JavaScript WCF 文章标签： AJAX json JQuery

本文链接：https://blog.csdn.net/Tristan_Dong/article/details/14525021

版权

JavaScript 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

jQuery

17 篇文章 0 订阅

订阅专栏

WCF

5 篇文章 0 订阅

订阅专栏

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

Tristan_Dong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Introduce AJAX about how to dynamic loading HTML/JSON/XML dataType

1. how to loading HTML/JSON/XML dataType via AJAXAs 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
复制链接

扫一扫