Now days I’m working on a web project. So I decide to tell you some modern web techniques regarding Web Developing.
Now a days one of the most popular plugin is a Jquery plugin so in here I’m explaining how to use Jquery with Ajax.
If we want to get some data from the user in webpage the best way is to use html <form> tag but case is if we using normal Ajax we have to write long java script to handle that ajax object but if we use Jquery we have to write only few lines of code to do it .Other thing is we can send whole form using one line of code.
Lets see how to do it. This is my JSP file name is Index.jsp it has simle form and when user click calculate button result will show in result textbox without refresing a page.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax with Jquery</title>
</head>
<body>
<h1>Ajax with Jquery Simple Example</h1>
<h3>madushankaperera.wordpress.com</h3>
<br>
<form name="form1" method="GET" action="Ajaxexample" id="form1">
<table>
<tr>
<td>Number 1</td><td><input type="text" name="n1"/></td>
</tr>
<tr>
<td>Number 2</td><td><input type="text" name="n2"/></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Calculate"/></td>
</tr>
<tr>
<td>Result</td><td><input type="text" value="" id="result"/></td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
var form = $('#form1');
form.submit(function () {
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
var result=data;
$('#result').attr("value",result);
}
});
return false;
});
</script>
I have use Jquery Ajax method to deal with the Ajax.First I’m getting the form element in html tag to javascript variable
called “form” then I’m passing it to my servlet using Ajax. Then getting return value from servlet and dispaly it on page
In this example getting the 2 values from the user and pass it to java servlet and calculate the sum and display it on a page
here is my Java Servlet name is “Ajaxexample.java”
package com.servlets.cal;
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;
/**
*
* @author madushanka
*/
public class Ajaxexample extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
out.println(n1 + n2 + "");
}
}
My web.xml file
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <servlet> <servlet-name>Ajaxexample</servlet-name> <servlet-class>com.servlets.cal.Ajaxexample</servlet-class> </servlet> <servlet-mapping> <servlet-name>Ajaxexample</servlet-name> <url-pattern>/Ajaxexample</url-pattern> </servlet-mapping> <session-config> <session-timeout> 30 </session-timeout> </session-config> </web-app>
Actually this is very easy method to submit form data with Ajax you can use this with even PHP also .
Madushanka's IT Blog..... 