Google+ Followers

Connect

Get Updates Via Email

Enter your email address:

Delivered by FeedBurner

Sunday, 26 January 2014

JSP and Servlet Form Submission without page refresh show results on the same page using Jquery AJAX
























Code Snippet

HTML Form 

<form id='ajaxform' name='ajaxform' action='ajaxformexample' method='post'>
 First Name: <input type='text' id='firstname' name='firstname' size='30' required/><br/>
 Last Name: <input type='text' id='lastname' name='lastname' size='30'required/><br/>
 Email:  <input type='email' id='emailid' name='emailid' size='30'required/><br/>
 Password:  <input type='password' id='pwd' name='pwd' size='30'required/><br/>
 <input type='Submit'/> 
 <div id='content'>
</div>

</form>
the above HTML Form uses post method and url servlet redirect to "ajaxformexample"



Javascript Code

 var form = $('#ajaxform'); // id of form tag
 form.submit(function () {

 $.ajax({
 type: form.attr('method'),  //post method
 url: form.attr('action'), //ajaxformexample url
 data: form.serialize(), // serialize input data values
 success: function (data) {
 var result=data;
 $('#content').html(result); //showing result

 }
 });

 return false; // not refreshing page

 });

the above javascript code uses Ajax jquery concept and parameters type, url,data, and finally success function to show result from specified action SERVLET performed results back to same page and in the below code snippet Servlet uses doPost method to get values in the input fields;

public void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws IOException {
  resp.setContentType("text/html");
  
  PrintWriter out=resp.getWriter();
  String fname= req.getParameter("firstname");
  String lname= req.getParameter("lastname");
  String email= req.getParameter("emailid");
  String password= req.getParameter("pwd");
  out.println("<br/><br/>First Name = "+fname+"<br/><br/>Last Name = "+lname+"<br/><br/>Email = "+email+"<br/><br/>Password = "+password);
 }

index.jsp Page








servlet Java





 Output


17 comments :

  1. actually i used this code and when i enter the submit button the page get refreshed...pls suggest the solution

    ReplyDelete
    Replies
    1. have u used jquery code which will return false as below code ?

      var form = $('#ajaxform'); // id of form tag
      form.submit(function () {

      $.ajax({
      type: form.attr('method'), //post method
      url: form.attr('action'), //ajaxformexample url
      data: form.serialize(), // serialize input data values
      success: function (data) {
      var result=data;
      $('#content').html(result); //showing result

      }
      });

      return false; // not refreshing page

      });

      Delete
  2. And If I want to show in the same form, How I can do that?

    ReplyDelete
  3. Hi, why it opening the page: http://localhost:8080/SisGestWeb/AjaxformexampleServlet instead of displaying the result in the same page?

    ReplyDelete
  4. thnx so much...nicly explaned for beginners very usefulll

    ReplyDelete
  5. It doesn't work. The code reloads the page and open another page. Someone can help me ?

    ReplyDelete
  6. i need a deep explanation which is most helpful for me to develop a technical skills quickly.

    Java Training in Chennai

    ReplyDelete
  7. Suppose we used bootstrap and we want show any error then how i show ...in simple words vaidation/.

    ReplyDelete
  8. I have read your blog its very attractive and impressive. I like it your blog.

    Java Online Training Java EE Online Training Java EE Online Training Java 8 online training Core Java 8 online training

    Java Online Training from India Java Online Training from India Core Java Training Online Core Java Training Online Java Training InstitutesJava Training Institutes

    ReplyDelete
  9. can you provide me jquery code that make crud operation in SPA.

    ReplyDelete
  10. Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge.
    PHP Training in Chennai

    ReplyDelete

Share this to your friends