AJAX_DOM_Updates

DOM Manipulations after ajax call

by Judy R

HTML

Find City for postal code 10014:
<div id="postalDiv"></div>
<input type="button" value="Find Postal" id="postalBtn" />

JavaScript

var postalDiv = $('#postalDiv');
var postalBtn = $('#postalBtn');

performSearch = function () {
    var url = "http://www.geonames.org/postalCodeLookupJSON?postalcode=10014&country=US";

    $.ajax({
        url: url,
        type: "GET",
        success: function (jsonString) {
            var jsonObj = jQuery.parseJSON(jsonString);
            var html = jsonObj.postalcodes[0].placeName;

            postalDiv.html(html);
        },
        error: function (xhr, textStatus) {
            alert("error");
        }

    }); // matches ajax end

};

postalBtn.click(function () {
    performSearch();
});