jQuery getJSON() example using Java Servlet

jQuery getJSON() is convinence method for doing AJAX request when the dataType is JSON. Basically it is equivalent to
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
}); 
If you are interested in learning about jQuery.ajax() method or the back-end Java Servlet programming related to this tutorial then click on the link below
jQuery AJAX request and response example - Java Servlets, MySQL and JSON

In this example we have a form that takes a country code and then makes an AJAX request using the getJSON() method to check if the country code exists in our MySQL database. If the country code is valid then we display the related information. In addition to that we learn how to use the error(), beforeSend() and complete() methods associated with JSON request.


jQuery getJSON() example using Java Servlet
jQuery getJSON() Java Servlet response

jQuery Source Code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.io.*" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,nofollow"/>
<title>Programmers sample guide, help is on the way</title>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

 //Stops the submit request
 $("#myAjaxRequestForm").submit(function(e){
        e.preventDefault();
 });
 
 //checks for the button click event
 $("#myButton").click(function(e){
        
   //get the form data and then serialize that
         dataString = $("#myAjaxRequestForm").serialize();
         
   //getJSON request to the Java Servlet
   $.getJSON("../CountryInfo", dataString, function( data, textStatus, jqXHR) {
           //our country code was correct so we have some information to display
            if(data.success){
             $("#ajaxResponse").html("");
             $("#ajaxResponse").append("<b>Country Code:</b> " + data.countryInfo.code + "<br/>");
             $("#ajaxResponse").append("<b>Country Name:</b> " + data.countryInfo.name + "<br/>");
             $("#ajaxResponse").append("<b>Continent:</b> " + data.countryInfo.continent + "<br/>");
             $("#ajaxResponse").append("<b>Region:</b> " + data.countryInfo.region + "<br/>");
             $("#ajaxResponse").append("<b>Life Expectancy:</b> " + data.countryInfo.lifeExpectancy + "<br/>");
             $("#ajaxResponse").append("<b>GNP:</b> " + data.countryInfo.gnp + "<br/>");
            } 
            //display error message
            else {
                   $("#ajaxResponse").html("<div><b>Country code in Invalid!</b></div>");
               }
          })
    .error(function(jqXHR, textStatus, errorThrown){
      //console.log("Something really bad happened " + textStatus);
       $("#ajaxResponse").html(jqXHR.responseText);
    })
    .beforeSend(function(jqXHR, settings){
     //adding some Dummy data to the request
     settings.data += "&dummyData=whatever";
     //disable the button until we get the response
     $('#myButton').attr("disabled", true);
    })
    .complete(function(jqXHR, textStatus){
     //enable the button 
     $('#myButton').attr("disabled", false);
    });
 
 });

});

</script>
</head>

<body>
<div id="allContent">

<div id="myExample">
 <form id="myAjaxRequestForm">
  <fieldset>
   <legend>jQuery getJSON() example using Java Servlets and MySQL database</legend>
 
    <p>
     <label for="countryCode">Country Code:</label><br />
     <input id="countryCode" type="text" name="countryCode" />
    </p>
    <p>
     <input id="myButton" type="button" value="Submit" />
    </p>
  </fieldset>
 </form>
 <div id="anotherSection">
  <fieldset>
   <legend>Response from jQuery getJSON() Request</legend>
     <div id="ajaxResponse"></div>
  </fieldset>
 </div> 
</div> 
 
</div>       
</body>
</html>

References


4 comments :

  1. thanks ur post, this very helpful to em.
    plz. i am not able run u r example, plz. give me the option to download the code.

    ReplyDelete
    Replies
    1. Such an educational post which is giving method for doing AJAX request when the dataType is JSON. Thanks for sharing a nice post for JAVA developer. One of my friend is JAVA developer and doing freelance writing for psychology personal statement - http://www.personalstatementfolks.co.uk/psychology-personal-statement/ at Personal Statement Folks in London. And I think this article will be helpful to him to get more information on Java Servlets, MySQL and JSON.

      Delete
    2. Very beneficial and informative jQuery getJSON() example using Java Servlet are sharing here. This example may be useful for java developer and IT students who are getting help from essay writers Australia to write assignment or essay on various subject such as business, economics, English, health-care, nursing, human resource, and marketing at Secure Assignment Help. So I want to suggest them response example on Java Servlets, MySQL and JSON and see what they say about it. Thanks for sharing with us.

      Delete
  2. HI,

    Can you please tell me how did you read dataString in your servlet ?

    ReplyDelete