Project Name: AjaxExample1
Create index.jsp File under WebContent folder.
Create CalcAjax.java file under src->com.demo package. now eclipse project shows like this.
in index.jsp add the following code. index.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>Ajax Example in JSP And Servlet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
var number = $('#number').val();
var number1=$('#number1').val();
var datastr='number='+number+'&number1='+ number1;
$.ajax({
type:"post",
url:"CalcAjax",
data:datastr,
success:function(msg)
{
$("#result").hide();
$("#result").html("<h3>Addition Value is: " + msg + " </h3>").fadeIn("slow");
}
});
});
});
</script>
</head>
<body>
<form id="form" method="post">
Enter number1:
<input id="number" type="text" name="number" />
Enter number2:
<input id="number1" type="text" name="number1" />
<input id="btn" type="button" value="Calculate" name="btn"/>
</form>
<p id="result"></p>
</body>
</html>
Now open CalcAjax.java file. which we created under src->com.demo package. add the following code
CalcAjax.java
package com.demo;
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;
public class CalcAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int number = 0,number1=0;
number = Integer.parseInt(request.getParameter("number"));
number1 = Integer.parseInt(request.getParameter("number1"));
PrintWriter out=response.getWriter();
out.println(number+number1);
}
}
That's it. Now run your project. The result will shows like this
Result
Nice example for Jsp and servlet.Great collection of question, useful for both beginners and experience level Java programmer. Good job and carry on also I've passed last year in exploring max and Jitter,
ReplyDeleteand I've worked a lot on FFT and use of Jitter to handle FFT data. But I didn't dive to deeply in Jitter, because I'm not really interested in images. What I'd like to do is to have the possibility to make some operations on matrix based on Symmetry applications of Group Theory,
In a way to modify the spectral informations held in the matrix. Someone could argue if this could be done in Max, or could be better to work on it learning JAva and programming specific Externals? For that I am trying to go for 6 week training http://www.wiziq.com/course/12145-the-6-week-complete-java-primer-with-training-certificate wonder this course
will help me out
Thanks.
hello, thanks for tutorial. but, why url on $.ajax isn't foward to my servlet?
ReplyDeletethanks
hi yusfita,
ReplyDeleteTest ur servlet is alive r not. u have to configure ur servlet in web.xml. Example.
CalcAjax
com.demo.CalcAjax
CalcAjax
/CalcAjax
if u get same problem in servlet then use jsp for testing. above example in jsp as follows.
Filename: CalcAjax.jsp
<%
int number = 0,number1=0;
number = Integer.parseInt(request.getParameter("number"));
number1 = Integer.parseInt(request.getParameter("number1"));
out.println(number+number1);
%>
in $.ajax url mention file name(CalcAjax.jsp).
tas it. try this one.
with regards,
தமிழ்செல்வன்
hello,this example is good.but your example work when you clicked button.how can it work when ı write something without using button with using ajax.Do you know?
ReplyDeleteu can use any event such as onChange(), onblur(), onclick(), etc. for more events http://api.jquery.com/category/events/ visit this page.
DeleteFor Example:
use combo box onchange() event
html code
select class="empid"
script
$('.empid').click(function() {
$.ajax({
type:"post",
url:"url",
data:"data",
success:function(msg)
{
//ur code here
}
});
});