AJAX dynamic dropdown example - State and City
AJAX stands for Asynchronous JavaScript and XML is used when we wanted to change the content of the page without reloading the page.Ajax uses XMLHttpRequest object to exchange data with the server as all the browser support this object.To understand the methods of XMLHttpRequest object go through Ajax Tutorials.
In this post, I am going to share example based on ajax request.In below example, Ajax request is made to the server when the content of drop-down (State) changes and get the response as cities of the corresponding state.
Maven is used as a build tool.
Below is code for same.
StateServlet.java
package com.skuera.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyStateServlet
*/
@WebServlet("/MyState")
public class StateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public StateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String sname=request.getParameter("state");
System.out.println(sname);
PrintWriter out=response.getWriter();
if(sname.equals("UttarPradesh")){
out.println("Lucknow-Varanasi-Allahabad-Kanpur");
}else if(sname.equals("Karnataka")){
out.println("Bangalore-Hubli-Mysore");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
In this post, I am going to share example based on ajax request.In below example, Ajax request is made to the server when the content of drop-down (State) changes and get the response as cities of the corresponding state.
Maven is used as a build tool.
Below is code for same.
StateServlet.java
package com.skuera.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyStateServlet
*/
@WebServlet("/MyState")
public class StateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public StateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String sname=request.getParameter("state");
System.out.println(sname);
PrintWriter out=response.getWriter();
if(sname.equals("UttarPradesh")){
out.println("Lucknow-Varanasi-Allahabad-Kanpur");
}else if(sname.equals("Karnataka")){
out.println("Bangalore-Hubli-Mysore");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
state.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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">
<title>Insert title here</title>
<script type="text/javascript">
function displayCities(str) {
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");
}
var url = "/AjaxApp/MyState?state=" + str;
xmlHttp.open("GET", url, true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var res = xmlHttp.responseText;
var data = res.split("-");
var txt = "";
for ( var i = 0; i < data.length; ++i) {
txt += data[i] + "<br/>";
}
document.getElementById("div1").innerHTML = txt;
}
};
}
</script>
</head>
<body>
<select id="state" onchange="displayCities(this.value);">
<option value="UttarPradesh">UttarPradesh</option>
<option value="Karnataka">Karnataka</option>
</select>
<div id="div1"
style="height: 100px; width: 100px; background-color: #708090"></div>
</body>
</html>
You can download full code from Github.
Give you suggestion in comments.If you like the post Share with your friends on social network.
Give you suggestion in comments.If you like the post Share with your friends on social network.
AJAX dynamic dropdown example - State and City
Reviewed by JavaInstance
on
10:45:00 AM
Rating:
Reviewed by JavaInstance
on
10:45:00 AM
Rating:
No comments: