AJAX Example

JSON from same domain

This example will fetch blog posts from the JSON feed http://dwd-mongodb.herokuapp.com/ajax.

The AJAX request is called when the button is pressed. jQuery request will receive JSON and convert it native JS object for us. The title and link of each blog post will be generated.

The AJAX function and button click are defined in the javascript file ajax_example.js.



// When the browser has finished loading all HTML, run this.
jQuery(document).ready( function() {
    // when the Blog Posts Button is clicked -  /ajax example
    jQuery("button#BlogPostsBtn").click( getBlogPosts );
});


/*************************************************
    getBlogPosts (function)
    -------------------------
    Ajax request for JSON feed /data/allposts
    Retrieves blog posts 
    and passes them to buildBlogPostList
*************************************************/

var getBlogPosts = function(e) {

    var jsonURL = "/data/allposts";

    jQuery.ajax({

        url : jsonURL,
        dataType : 'json',
        type : 'GET',

        success : function(data) {
            console.log("inside success callback");
            console.log(data);
            if (data.status == "OK") {
                posts = data.posts;

                buildBlogPostList(posts);
            }
        },
        error : function(err) {
            console.log("error fetching blog posts");
        }

    }); // end of jQuery.ajax
} // end of getBlogPosts


/*************************************************
    buildBlogPostList (function)
    -------------------------
    Accepts an array of blog posts
    Builds the HTML to display link and title
    Appends HTML to 
    *************************************************/ var buildBlogPostList = function(blogpostsArray) { // newHTML will be populated with html and appended to the newHTML = ""; // loop through blogpostsArray and create HTML for title and link for(i=0; i"+currentPost.title+""; // concatenate tmpHTML to the main html string newHTML newHTML += tmpHTML; } //append new html to the DOM (browser's rendered HTML) jQuery("#blogposts_list").append(newHTML); }