Unable to pass data from JSP to Servlet using JQuery

Question

I am trying to send some data from JSP to Servlet using JQuery/Ajax. Below are the important items of my JSP file.

script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
   var form = $('#customItemForm');
   form.submit(function () {

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function (data) {


        }
    });

    return false;
});
</script>

<!--add custom item -->

<div class="modal fade" id="customItemModel" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png"  width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add Custom Item</b></font></span> </div>
      <div class="modal-body">
          <form class="form-horizontal" name="customItemForm" method="post" action="PastSurgicalCustomItem">
        <fieldset id="modal_form">

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-1 control-label" for="textinput">Name</label>
            <div class="col-md-8">
              <input id="customName" name="customName" type="text" placeholder="" class="form-control input-md">
            </div>
          </div>


          <div class="modal-footer">
              <input type="submit" id="additional" class="btn btn-primary" data-dismiss="modal" value="Submit">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

<!-- /add custom item --> 

Below is the Servlet class

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;

public class PastSurgicalCustomItem extends HttpServlet {


    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

            String customName = request.getParameter("customName");
            System.out.println(customName);

    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

However the servlet do not print the value, which means the JQuery didn't pass anything. What have I done wrong here?

Answer 1

Set a breakpoint in you doGet method and step through the code to see whether it is not executed at all or whether it is executed, but throws an exception.

Additionally, you should monitor your AJAX call in the browser (eg, by looking at the network connections in the developer view available in all modern browsers) and reviewing the returned header and content of the AJAX call.