post(): There are a lot of versions of this method. But here, we are going to use the simple version which takes the url-pattern and the data to be submitted.
Project structure
Folder: D:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\jq_postjq_post
|
+-- index.html
+-- WEB-INF
+-- classes
+-- simple.java
+-- simple.class
index.html
<html>
<head>
<title>Send POST Request to Servlet with JQuery</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
$(function(){
$( "#hform" ).submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var form = $(this);
// Get the value in input uname
term=$("input[name='uname']").val();
// Send the data using post
var posting = $.post("hello",{uname:term});
// When the POST request is done..
// data: The output printed in servlet
posting.done(function(data) {
// Put the results in a div
$("#view").append(data+"<br/>");
});
});
});
</script>
</head>
<body>
<!--Create the form-->
<form id="hform" action="/jq_post/hello" method="post">
<input type="text" name="uname"/>
<input type="submit" value="SUBMIT"/>
</form>
<!--Create the form-->
<div id="view"/>
</body>
</html>
web.xml - Deployment descriptor
<web-app>
<servlet>
<servlet-name>ser</servlet-name>
<servlet-class>simple</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ser</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
Related: What is web.xml in servlets?
simple.java contains doPost()
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
public class simple extends HttpServlet
{
public void doPost(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException
{
// Get the user name from html input field
String name=req.getParameter("uname");
// Get PrintWriter obj using getWriter() in HttpServletResponse
PrintWriter pw=res.getWriter();
// Print, that's it!!
pw.println("Hello "+name+"!");
}
}
Image credit: tuicool.com