Google+

9 Aug 2012

ajax jquery call to servlet example

How to call a servlet using jquery ajax

Description : This is a small example to call servlet using ajax jquery. also shows servlet mapping in web.xml file (Deployment descriptor) .How to use external javascript file in java[ajax servlet Tutorial].

web.xml

<servlet>
    <description></description>
    <display-name>AjaxServlet</display-name>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>servlets.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/AjaxServlet</url-pattern>
  </servlet-mapping>

 <welcome-file>index.jsp</welcome-file>


index.jsp

jquery api needed

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="myJquery.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<div>
<input type="text" id="newText">
<input type="button" id="newButton" value="sendData">
</div>



servlet : AjaxServlet.java

public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(" inside do post "+request.getParameter("message"));
    }

}

jquery file : myjquery.js

$(document).ready(function(){
  $('#newButton').click(function(){
           sendData();
    });
   });
function sendData(){
   var mge = $('#newText').val();
    alert(mge);
    $.ajax({
        type: "POST",
        url: "AjaxServlet",
        data: { message : mge  }
      }).done(function( msg ) {
        alert( "Data Saved: " + msg );
      });
}

Description : The Example show how to call a servlet from jsp using ajax jquery. Data from jsp page will pass to servlet as parameter through ajax call


To receive response from the servlet, Change the code to following

In servlet

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws    ServletException, IOException {
        String message = request.getParameter("message");
         String respMess = message + "data saved ";
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(respMess);
    }

In jquey



function sendData(){
    var mge = $('#headText').val();
   
    $.ajax({
          type: "POST",
          url: "JQueryServlets",
          data: { message : mge},
          success : function(data){
              alert('success'+data);
          }
        });
   
}

our offical facebook page

Your feedback may help rest of the readers... so please, your valuable comments

Now take a look how cascading style sheet is applied in struts, that is a constant look and feel for all your web pages in your web application . >>> lazy java
http://belazy.blog.com/

FeedBacks about blog