Welcome to TechYari!

Tutorials on webdesign, web development and more...

Displaying Records Using jQuery Ajax and JSON

By  TechYari     5/01/2014    Labels:,,, 


In this tutorial I am going to show you a simple example of how to display records using jQuery and Ajax with JSON data. I have used J2EE to supply dynamic json response however you can use same approach with any other programming language until the response from the server is in form of json.


Step 1 : Creating the home page

Lets create our html page using using Initializr. We will modify this to suit our needs. You can also create this page from scratch if you don't want to use any css framework. We need few lines of html code to display links and corresponding records. Take a look at below code for reference

<div class="main-content">
<div class="container">
 <div class="row">
 <div class="col-md-4">
  <h3>Click on the links</h3>
  <li><a href="#" class="ajax-link" data-category="sports">Top 5 Sports</a></li>
  <li><a href="#" class="ajax-link" data-category="movies">Top 5 Movies</a></li>
  <li><a href="#" class="ajax-link" data-category="videogames">Top 5 Games</a></li>
  <div class="col-md-8">
  <h3>Result will be displayed below using ajax</h3>
  <div class="page-content">
   <div id="0"></div>
   <div id="1"></div>
   <div id="2"></div>
   <div id="3"></div>
   <div id="4"></div>

Styling the page with CSS

We will style this page using very minimal css, look at the code below :

.lightblue{background-color:rgb(185, 224, 243)}
.page-content div{padding:5px}

Creating the Ajax request and displaying JSON records using jQuery 

In order to get the data when a user clicks on a link, we need to bind jQuery's click event with each link using the class supplied on the links. First of all we need to extract the category from link using jQuery's attribute selector, next will bind the ajax request to our ajaxController url and pass the category as query parameter,method as GET, content type as JSON and this in return will serve us with required data as response. Our ajax call contains two methods called success and failure, we will display a failure message in case of any issues while we will use the success method to display returned records using jquery's various methods and selectors. We have also provided a bit of coloring and effect using the same method.

Take a look at below code for reference :

  var link = $('.ajax-link');{
   var category = $(this).attr("data-category");
   // Using the core $.ajax() method
       // the URL for the request
       url: "/ajaxController",
       // the data to send (will be converted to a query string)
       data: {
           category: category
       // whether this is a POST or GET request
       type: "GET",
       // the type of data we expect back
       dataType : "json",
       // code to run if the request succeeds;
       // the response is passed to the function
       success: function( json ) {
           jQuery.each( json, function( i, val ) {
              $( "#" + i ).html(val);
               $( "#" + i ).addClass("lightblue");
       // code to run if the request fails; the raw request and
       // status codes are passed to the function
       error: function( xhr, status, errorThrown ) {
           alert( "Sorry, there was a problem!" );
           console.log( "Error: " + errorThrown );
           console.log( "Status: " + status );
           console.dir( xhr );

Creating the controller and getting dynamic data as JSON object

Instead of using a hardcoded json file I have created a simple Servlet wich will provide us with JSON response. I have used Google's Gson library to convert our array list to JSON.  Array list has been hard coded with few values here, however you can  get data from the database and use the same approach.

package in.techyari.demo.ajax.jqueryajax;

import java.util.ArrayList;
import javax.servlet.http.*;

public class AjaxControllerServlet extends HttpServlet {
 public void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws IOException {
  String category = req.getParameter("category");
  ArrayList result = new ArrayList();
  }else if(category.equalsIgnoreCase("movies")){
   result.add("The Godfather");
   result.add("The Fight Club");
  }else if(category.equalsIgnoreCase("videogames")){
   result.add("Counter Strike");
   result.add("Angry Birds");
  Gson gson = new Gson();
  PrintWriter writer = resp.getWriter();

Mapping our ajaxController servlet to appropriate url

This step is only necessary if you are using J2EE as a back end to supply JSON data with last step. You can use Web 3.0 annotations as well if you are using tomcat 7 or later. To properly redirect/handle the url requested by ajax we need to update your web.xml file with our ajaxController servlet details.

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi=""
xsi:schemaLocation="" version="2.5">


This it it. We have successfully created a simple jQuery Ajax request and displayed few records dynamically with nice effects. I have not included pagination here as we hard coded and required only five records. In next tutorial I will show you how to handle more records from database with pagination.

Kindly like and share this tutorial if you find it useful, comment below if you wanna say something. Happy Coding ! Cheers..

About TechYari

A web developer, blogger, amateur designer and an open source enthusiast.

No comments:

Post a Comment

Contact Form


Email *

Message *


Follow TechYari on


About TechYari

Tech Yari is a Technical Blog featuring articles on Web Development, Web Design, Search Engine Optimization, Social Media Marketting and Programming.