2014年10月24日 星期五

jQuery getJSON()

AJAX 方面學習,今天有看到一些可以學習的的部份

jQuery.getJSON()  ,  .appendTo()

Getting Started with ASP.NET Web API 2

原本寫法
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});

1.5以後的版本可以寫成如,可用 .done來作後續 data成功回傳的動作

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
}).done(function() {
console.log( "second success" );
}).fail(function() {
console.log( "error" );
}).always(function() {
console.log( "complete" );
});
jqxhr.complete(function() {
console.log( "second complete" );
});

沒有留言:

張貼留言