Servlet's response without refreshing JSP

Question

I would like to print the response of my servlet in the same page without refreshing the page. I wrote this code, but I can't understand why why it opens the page: http://localhost:8080/..../NewServlet.do instead of displaying the result in the same page.

       <html>
       <head>
       <script src="http://code.jquery.com/jquery-1.10.2.min.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>
  </head>
     <body>
     <form name=form1 action="NewServlet.do" method="post">
   <select id='choose' class='form-control' name='choose'>
<option value='prodotti'>Products</option>
<option value='login'>Objects</option>
 </select>
<button type='submit' class='btn btn-default' style="width:  40%;">SUBMIT</button>

     <div id='result'>
      ///  I want the servlet's response is placed here.
   </div>

    </form>
   </body>
   <html>

My servlet

     protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

        response.setContentType("text/html");
        String i = request.getParameter("choose");
        PrintWriter out = response.getWriter();
        out.println("<br>"+i+"</br>");

      }

score 3 · Answer 1 · answered Aug 03 '16 at 11:41

3

It's actually not about Java or JSP, but about JavaScript. Try

form.submit(function (event) {
  event.preventDefault(); // magic!
  $.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
      var result=data;
      $('#result').attr("value",result);
    }
  });
  return false;
});

answered Aug 03 '16 at 11:41

Jozef Chocholacek

2,874
2
20
25

Nothing. It reloads the page :( – blinkettaro Aug 03 '16 at 11:46
Ah, now I see it: First, your form has no id, but you are using ID selector to get it - can't work, add `id="form1"` to the form. Second, I would wrap the script into `$(document).ready(function(){ ... here the original code ... });`, to be sure, that DOM is already constructed, when we are modifying it. – Jozef Chocholacek Aug 03 '16 at 12:07
I modify my code (not the one that you wrote) adding id='form1'. It doesn't work. Then I used your code and it doesn't work. It seems that the javascritp code is not read or activated..:/ – blinkettaro Aug 03 '16 at 12:46
Are there any errors in browser's console? Have you tried to debug the javascript? – Jozef Chocholacek Aug 03 '16 at 12:48
Debugging I discovered that it doesn't enter in the function. So I placed the script at the end of file html. Now it works, infact the javascript code is activated, but doesn't print anything in

– blinkettaro Aug 03 '16 at 13:19
Debugging the "var result" is valued with the correct value. So there is only this little problem of viewing the value on the page – blinkettaro Aug 03 '16 at 13:28
ok it works. $('#result').attr("value",result) is wrong ---> $('#result').html(result); – blinkettaro Aug 03 '16 at 13:35

score 0 · Answer 2 · answered Feb 08 '17 at 03:44

Try this: In jsp

<input class="help_button" id="help_button" type="button" onclick="showDetail()" value="Do Smth" />


   function showDetail() {

    $.ajax({
         url:'/yourServlet.cfm',
         data:{dataName:data},
        type: 'GET',
    })
    .done(function(result) {
        //here do smth with result 
  });
}

Your Servlet

response.setContentType("text/plain");
response.getWriter().print("responseData"); //----Sending response

Servlet's response without refreshing JSP

2 Answers2