CODEWITHSUNDEEP
javajqueryajaxservletspost
crmepham
crmepham

Reputation: 4760

Trying to post form data to servlet using JQuery

I am attempting to post data to a servlet where it will be inserted in to a mysql database.

Here is the html form:

<form id="commentForm" name="commentForm" action="http://server.co.uk/dbh" method="POST">
    <input type="text" name="name" placeholder="Your name" required="required">
    <textarea name="comment" placeholder="Enter your comment here" required="required"></textarea>
    <input type="hidden" name="postID" id="postID" value="<%= postID %>">
    <input type="submit" name="submit" id="commentSubmit" value="submit">
</form>

The Jquery:

$("#commentSubmit").click(function(e){
    var postData = $("#commentForm").serializeArray();
    var formURL = $("#commentForm").attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) 
            {
                $("#commentFormWrap").html("<p>Success</p>");
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                $("#commentFormWrap").html("<p>error: "+errorThrown+"</p>");
            }
        });
    e.preventDefault(); //STOP default action
    $("#commentForm").hide();
});

A simplified dbh servlet:

import javax.servlet.annotation.WebServlet;
...
@WebServlet(description = "Handles connection to MySql database", urlPatterns = { "/dbh" })

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    postArray = request.getParameterValues("postData");
    commentName = postArray[0];
    comment = postArray[1];
    postID = Integer.parseInt(postArray[3]);
    try{
        submitComment();
    }catch(Exception e){
        e.printStackTrace();
    }
}
public void submitComment() throws Exception{
    try{
        sql="INSERT INTO crm_comments (comment_name, comment_content, comment_date, post_id) VALUES (?, ?, NOW(), ?)";
        prep = conn.prepareStatement(sql);
        prep.setString(1, commentName);
        prep.setString(2, comment);
        prep.setInt(3, postID);
        rs = prep.executeQuery();
    }catch(Exception e){
        e.printStackTrace();
    }
}

Currently the ajax call is returning the error block error:. But nothing as the errorThrown variable. From what I can see the servlet is written correctly. Is there something wrong between the html and the Jquery ajax call, that it isn't posting the data to the servlet?

Upvotes: 2

Views: 3620

Answers (2)

Vishal
Vishal

Reputation: 108

postArray = request.getParameterValues("postData");

I think you can replace this with actual field names 

commentName = request.getParameter("name");
comment = request.getParameter("comment");

this will solve your problem

Upvotes: 2

SiZiOUS
SiZiOUS

Reputation: 668

According to the jQuery documentation, the serializeArray method returns a JavaScript array of objects. This method will generate a JSON object from your form, that will look like: [{"name":"name",value:"<your name input value>"},{"name":"comment",value:"<your comment>"},{"name":"postID",value:"<postID value>"} ...]. Only the content of the postData variable will be sent: you won't have any reference at all to that postData keyword in your Servlet.

So in your Servlet, the request.getParameterValues("postData"); call seems to be invalid. Try this instead:

commentName = request.getParameterValues("name");
comment = request.getParameterValues("comment");
postID = Integer.parseInt(request.getParameterValues("postID"));

Upvotes: 1

Related Questions