JAVA BY RAMAKRISHNA: JQuery+Ajax+Json+Maven Example with Input Json data and Output also Json data

Sunday, 15 December 2013

JQuery+Ajax+Json+Maven Example with Input Json data and Output also Json data

Explanation:

When we enter name and salary and click on submit,the data which we have entered is converts to json data and send to servlet ,servlet take the data and display same data as json output.

pom.xml

<dependencies>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20090211</version>
</dependency>
</dependencies>

HTML PAGE
two.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {

$("#SubmitButton").click(function() {

var name = $("#name").val();
var salary = $("#salary").val();

var jsonData = {"name":name,"sal":salary};

$.ajax({

url:'sc2', //servlet url
type:'GET', //servlet request type
contentType: 'application/json', //For input type
data: jsonData, //input data
dataType: 'json', //For output type
success: function(data) {
$("#main").html("<p>JSON Data From Servlet=><br>Name:"+data.name+",<br>Salary:"+data.salary+"</p>");
},
error: function(e) {
alert(e.status); //error status
}
});
});
});
</script>
</head>
<body>
<div id="main">
Name:::<input type="text" name="name" id="name"/>
Salary:<input type="text" name="salary" id="salary"/>

<button id="SubmitButton">Submit</button>
</div>
</body>
</html>

Servlet:

package com.info.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONException;
import org.json.JSONObject;

public class ServletExample2 extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name = request.getParameter("name");
String salary = request.getParameter("sal");

PrintWriter out=response.getWriter();
JSONObject json = new JSONObject();

try {
json.put("name",name);
json.put("salary",salary);
} catch (JSONException e) {
e.printStackTrace();
}

out.print(json);
}
}

web.xml:

<web-app>

<servlet-name>sc2</servlet-name>

<servlet-class>com.info.servlet.ServletExample2</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>sc2</servlet-name>

<url-pattern>/sc2</url-pattern>

</servlet-mapping>

</web-app>