Programmer Programmer - 3 months ago 15
Ajax Question

Ajax does not send the form data to servlet

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


`

Answer

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.