Ajax does not send the form data to servlet

Question

i am using ajax to send data to my servlet to calculate the sum of two numbers. The form is submitted to the function but does not go any further. This is my html.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
 <script type= "text/javascript">
function calc(){
 $( document ).ready(function() {

 console.log( "ready!" );

 $('button').click(function(){
     $.ajax({
        url:"ScriptServlet.java",
        type:"post",
        dataType:"text",           
        success: function(response) {
        console.log("requestData () - success. Data : "+response)
      }
 }); 
 });  });  };
</script>

<body>
<h1>A practice session on ajax</h1>

<form action="ScriptServlet" method="post" >
<table border ="3">
<tr><td>Enter 1st number : </td><td><input type="text" name ="n1"></td></tr>
<tr><td>Enter 2nd number : </td><td><input type ="text"  name="n2"></td></tr>
<tr><td>Result : </td><td><input type ="text" value="" id="result" ></td></tr>  
<tr><td></td><td><input type ="button" onclick="calc()" value="calculate" ></td></tr>
</table>
</form>

</body>  
</html>

my servlet computes the sum and should return the value.

  { response.setContentType("text/html");
    PrintWriter out = response.getWriter();

        int num1 = Integer.parseInt(request.getParameter("n1"));
        int num2 = Integer.parseInt(request.getParameter("n2"));

        out.println(num1+num2+"");
 }

i am un able to figure out what i am doing wrong.

I am not sure if posted the right one. please correct if i am wrong

`0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET / HTTP/1.1" 200 12079
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /asf-logo.png HTTP/1.1" 200 17811
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /tomcat.css HTTP/1.1" 200 6074
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /tomcat.png HTTP/1.1" 200 5103
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /bg-nav.png HTTP/1.1" 200 1401
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /bg-upper.png HTTP/1.1" 200 3103
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /bg-button.png HTTP/1.1" 200 713
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:04 +0800] "GET /bg-middle.png HTTP/1.1" 200 1918
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:26 +0800] "GET /faisal/session2.html HTTP/1.1"   200 2037
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:36 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:02:36 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:15 +0800] "GET /faisal/session2.html HTTP/1.1" 304 -
0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:19 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:54 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:54 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:54 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:08:54 +0800] "POST /faisal/Servlet.java HTTP/1.1" 200 1174
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:16:37 +0800] "GET / HTTP/1.1" 200 12079
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:16:40 +0800] "GET /manager/html HTTP/1.1" 401 2550
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:16:49 +0800] "GET /manager/html HTTP/1.1" 401 2550
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:16:54 +0800] "GET /host-manager/html HTTP/1.1" 401   2112
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:01 +0800] "GET /host-manager/html HTTP/1.1" 200 7099
  0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:01 +0800] "GET /host-manager/images/asf-  logo.gif HTTP/1.1" 200 7279
  0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:02 +0800] "GET /host- manager/images/tomcat.gif HTTP/1.1" 200 1934
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:15 +0800] "GET /manager/status HTTP/1.1" 401 2550
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:23 +0800] "GET /manager/status HTTP/1.1" 403 3288
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:26 +0800] "GET /manager/status HTTP/1.1" 403 3288
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:26 +0800] "GET /manager/status HTTP/1.1" 403 3288
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:09:17:29 +0800] "GET /manager/html HTTP/1.1" 403 3288
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:31 +0800] "GET /docs/manager-howto.html HTTP/1.1" 200 106591
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:31 +0800] "GET /docs/images/tomcat.gif HTTP/1.1" 200 2066
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:31 +0800] "GET /docs/images/asf-logo.gif HTTP/1.1" 200 7279
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:31 +0800] "GET /docs/images/void.gif HTTP/1.1" 200 43
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:09:17:43 +0800] "GET /docs/ HTTP/1.1" 200 14448
  0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:45:25 +0800] "GET / HTTP/1.1" 200 12079
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:47:40 +0800] "GET / HTTP/1.1" 200 12079
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:47:51 +0800] "GET /session2.html HTTP/1.1" 404 994
0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:48:30 +0800] "GET /session1.html HTTP/1.1" 404 994
0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:51:45 +0800] "GET / HTTP/1.1" 200 12079
0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:51:54 +0800] "GET /faisal/session1.html HTTP/1.1" 200 1826
0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:51:59 +0800] "GET /faisal/ScriptServlet?n1=21&n2=11 HTTP/1.1"  200 4
 0:0:0:0:0:0:0:1 - - [24/Feb/2014:11:52:07 +0800] "GET /faisal/ScriptServlet?n1=21&n2=11   HTTP/1.1" 200 4
0:0:0:0:0:0:0:1 - - [24/Feb/2014:16:50:06 +0800] "GET / HTTP/1.1" 200 12079
0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:16:50:07 +0800] "GET /host-manager/html HTTP/1.1" 200 7099
0:0:0:0:0:0:0:1 - - [24/Feb/2014:16:50:07 +0800] "GET /host-manager/images/asf-logo.gif HTTP/1.1" 200 7279
0:0:0:0:0:0:0:1 - - [24/Feb/2014:16:50:07 +0800] "GET /host-manager/images/tomcat.gif HTTP/1.1" 200 1934
 0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:16:50:21 +0800] "GET /manager/status HTTP/1.1" 403 3288
0:0:0:0:0:0:0:1 - tomcat [24/Feb/2014:16:50:25 +0800] "GET /manager/html HTTP/1.1" 403 3288
0:0:0:0:0:0:0:1 - - [24/Feb/2014:16:50:31 +0800] "GET /docs/manager-howto.html HTTP/1.1" 200   106591
0:0:0:0:0:0:0:1 - - [24/Feb/2014:16:50:31 +0800] "GET /docs/images/void.gif HTTP/1.1" 200 43

`

Get rid of the `calc` function entirely, and change your button selector to something that works, like `input[type="button"]`. You may also need to prevent the default action of the button, not sure. — Jason P, Feb 20 '14 at 01:24

score 1 · Answer 1 · answered Feb 20 '14 at 01:22

You try to change $('button') into $('input[type="button"]')

 $('input[type="button"]').click(function(){
 $.ajax({
    url:"ScriptServlet.java",
    type:"post",
    dataType:"text",           
    success: function(response) {
    console.log("requestData () - success. Data : "+response)
  }
});

score 1 · Accepted Answer · edited Aug 11 '16 at 13:50

Here is the solution ,

The first thing is , please check your Servlet URL path is ScriptServlet.java in your web.xmland put system.out.println() to print the values in the console.

Then please change the following,

You are doing completely wrong . Here you don't need to submit the form. Instead of , send only the ajax request to the servlet, and pass the paramters to the servlet .

Your jsp page will be

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Calculator</title>
</head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">

$( document ).ready(function() {

    //alert("DOM is ready");

});

function calc() {

    //This two values need for only option one to send the data 
    var number1 = $.trim($("#n1").val());
    var number2 = $.trim($("#n2").val());

    $.ajax({
        type: "POST",
        url: "ScriptServlet.java",
        data: "&n1=" + number1 + "&n2=" + number2, // option one
        //data: $('#calcForm').serialize(); This is a second option to send the data to the servlet. Here no need to send the data separately.
        dataType: "html",
        success: function(response) {

            //alert("Success : "+response);
            if(response != null && response !="" && response !="null"){
                $('#result').val(response);
            }

        },
        error: function(e) {
            alert('Error: ' + e.message);
        }
    });
}


</script>

<body>
    <form id='calcForm'>
        <table border="3">
            <tr>
                <td>Enter 1st number :</td>
                <td><input type="text" name="n1" id="n1"></td>
            </tr>
            <tr>
                <td>Enter 2nd number :</td>
                <td><input type="text" name="n2" id="n2"></td>
            </tr>
            <tr>
                <td>Result :</td>
                <td><input type="text" value="" id="result"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="button" id="calculate" value="calculate"
                    onclick="calc()" /></td>
            </tr>
        </table>
    </form>

</body>
</html>

Your Servlet will be

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

    PrintWriter out = response.getWriter();

    // To get confirmation that the servlet gets the values of n1 , n2
    System.out.println("n1 : "+request.getParameter("n1"));
    System.out.println("n2 : "+request.getParameter("n2"));

    int num1 = Integer.parseInt(request.getParameter("n1"));
    int num2 = Integer.parseInt(request.getParameter("n2"));

    out.println(num1+num2+"");


}

Hope this helps.

thanks a lot for your help.. i used your code and it is working fine. just one error now. It says `POST url(to my servlet) 404 (not found)`. I have my .jsp, .java and xml file in the same folder. — Programmer, Feb 21 '14 at 03:13
Glad to help you.Please post your `web.xml` and the `folder` structure of your project. — Human Being, Feb 21 '14 at 06:13
I think the problem is with my server. i am using tomcat v 7.0. the server is running in the eclipse but when i try to access through the web browser, the error message 404 comes up. I tried (http://localhost:8080) but i cannot access the tomcat homepage which means Tomcat is not working. I also used the startup.bat file from tomcat but still it wont work. — Programmer, Feb 21 '14 at 06:47
Clean all projects in your eclipse. Clean the tomcat and tomcat work directory in eclipse or delete that tomcat in eclipse and create new tomcat setup in eclipse. Then let me know. — Human Being, Feb 21 '14 at 06:53
i made tomcat work somehow. The code is working. but there is no result. In the result box the complete servlet code is printed. — Programmer, Feb 21 '14 at 08:25
can you check the values of n1 and n2 are printed in the console ? — Human Being, Feb 21 '14 at 08:57
i used the `console.log(response);` to check. It prints the entire scriplet code. — Programmer, Feb 21 '14 at 09:19
If my answer is really helped you , please feel free to accept and do upvote my answer,So that it will be helpful to others. — Human Being, Feb 24 '14 at 11:59

score 0 · Answer 3 · answered Feb 25 '14 at 07:56

0

What data you are sending... Please set data property of ajax to submit it on server ans set type property to post to send data to server...

To collect form data you can use

var data = $("formId").serialize();

then add data: data to $.ajax...

answered Feb 25 '14 at 07:56

itzmukeshy7

2,669
1
21
29

Ajax does not send the form data to servlet

3 Answers3