Ajax request tips


Can anyone help with this task? Thanks

Please perform an AJAX request for the URL inside test_url variable and list all messages (socialProof[i].messages[0].message) under the div#list element when the “List Messages” button is clicked. You can browse the url from your browser to see the JSON response.

What have you tried so far? Since jQuery is already included in your code, have you tried using it to do an AJAX request? I’m not talking yet about making the request when you click the button.

Basically it will boil down to the following:

  1. Perform an AJAX request with jQuery right when the page loads, then printing the result to the console.
  2. Adding a click listener to the button. Just make it print something to the console.
  3. Now instead of printing to the console, make the button click perform the AJAX request.
  4. Now instead of printing the whole JSON response to the console, find a way to somehow extract just the data that you need, then print just that.
  5. After that, find a way to display it in the #list element.

I recommend reading the jQuery docs. Particularly for items 1, 2 and 5.