'Can not send FormData from JSP page using jquery-AJAX to Servlet

Trying to send POST data from JSP file using jQuery-AJAX to servlet, but getting null values in servlet post request.

On JSP page , in console it is displaying proper data and in post request it is showing me that it is sending data, i have checked that using firebug in mozilla. But getting null values in servlet.

JSP-Code:

        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

        <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.24.js"></script>
        <script type="text/javascript">
            $( document ).ready(function() {

    alert("DOM is ready");

});

             function qry()
            {

                var fd = new FormData();                               
                var tinfo=$("#tablename").val();                   
                var cinfo=$("#columnname").val();
                var oinfo=$("#operator").val();
                var uinfo=$("#txtuserinput").val();
                 console.log(tinfo);
                console.log(cinfo);
                console.log(oinfo);
                console.log(uinfo);

                fd.append("abc",tinfo);
            fd.append("mycolumnname",cinfo);
            fd.append("myoperator",oinfo);
            fd.append("mytxtuserinput",uinfo);

                 $.ajax({       

                                type: 'POST',
                                url: "http://localhost:8084/NavigatingApp/getInfo/queryoutput",     
                                contentType: false,
                                dataType: "html",
                                data: fd,                                
        async:false,            
        cache: false,

        processData: false,                

                success:function(data){
                    console.log(data);

                        },
        error:function(){
            alert("Error in receving data...!!!");
        }
    });
            }
            </script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <select name="tablename" id="tablename" >
            <option value="tbl1">tbl1</option>
            <option value="tbl2">tbl2</option>
            <option value="tbl3">tbl3</option>            
        </select>
        <select name="columnname" id="columnname">
            <option value="col1">col1</option>
            <option value="col2">col2</option>
            <option value="col3">col3</option>
        </select>
        <select name="operator" id="operator">
            <option value="op1">op1</option>
            <option value="op2">op2</option>
            <option value="op3">op3</option>
        </select>
        <select name="condition" id="condition" >
            <option value="condtn1">condtn1</option>
            <option value="condtn2">condtn2</option>
            <option value="condtn3">condtn3</option>
        </select>
        <input type="text" name="txtuserinput" id="txtuserinput" />
          <input type="button" value="search" id="btnsearch" onclick="qry();" />
    </body>
</html>

Servlet Code:

@WebServlet(name = "queryoutput", urlPatterns = {"/queryoutput"})
public class QueryOutput extends HttpServlet {
 public QueryOutput() {
        super();
        // TODO Auto-generated constructor stubatavu

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

    }


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


            response.setContentType("application/json;charset=UTF-8");


            System.out.println(" inside do post table::" +request.getParameter("mytablename"));
            System.out.println(" inside do post col name:: " +request.getParameter("mycolumnname"));
            System.out.println(" inside do post operator::" +request.getParameter("myoperator"));
            System.out.println(" inside do post user input::" +request.getParameter("mytxtuserinput"));
              response.setContentType("application/json;charset=UTF-8");

            PrintWriter out=response.getWriter();


              out.flush();

    }    
}


Solution 1:[1]

You are not sending data at all

data: fd,

Try;

data: {fd: fd}

Solution 2:[2]

Try with with Content-Type "application/x-www-form-urlencoded"

It seems JSP read formData as unique parameter.

If it could help... The code below works fine (without formdata).

JS :

   function saveClient() {
        var ticketToSave=ticket;
        var connexion=null;
        if(window.XMLHttpRequest) // Firefox
            connexion = new XMLHttpRequest();
        else if(window.ActiveXObject) // Internet Explorer
            connexion = new ActiveXObject(\"Microsoft.XMLHTTP\");
             else { // XMLHttpRequest non supporte par le navigateur
            alert(\"Votre navigateur ne supporte pas les objets XMLHTTPRequest...\");
            return;
             }
        
        var client = 'toto';
        var name = 'titi';

        var postData = 'client=' + encodeURIComponent(client) + 
                       '&name=' + encodeURIComponent(name);

        connexion.onreadystatechange=function(){request_callback(connexion);}
        connexion.open(\"POST\", \"saveClient.jsp\");
        connexion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        connexion.send(postData);
             
    }

JSP :

out.print(request.getParameter("client"));
out.print(request.getParameter("name"));

Enumeration reqParams = request.getParameterNames();
while (reqParams.hasMoreElements()) {
  String key= (String) reqParams.nextElement();
  String val = request.getParameter(key);
  out.println(" Key ==> "+key+" , Value ==> "+val);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlackPearl
Solution 2 hyphenX Freeman