Web Tech: jQuery AJAX request and response example

<%@ 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>
Web Tech

Friday 28 December 2012

jQuery AJAX request and response example

No comments:

Post a Comment
