Question

我正在使用ajax将数据发送到servlet到calculate the sum of two numbers。表单已提交给函数，但不再进一步。这是我的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>

我的servlet计算总和并应该返回值。

  { 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+"");
 }

我无法弄清楚我做错了什么。

我不确定是否发布了正确的。如果我错了请纠正

`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 1

您尝试将$（'button'）更改为$（'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)
  }
});

Answer 2

以下是解决方案

首先，请检查Servlet URL中的ScriptServlet.java路径为web.xml，并将system.out.println()置于控制台中打印值。

然后请更改以下内容

你做错了。在这里，您无需提交表单。而不是仅将 ajax 请求发送到 servlet ，并将参数传递给 servlet 。

您的jsp页面将

<!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>

您的Servlet将

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+"");


}

希望这有帮助。

Answer 3

您要发送的数据...请设置ajax的数据属性以在服务器和设置类型属性上提交以发布以将数据发送到服务器...

要收集表格数据，您可以使用

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

然后将数据添加到$ .ajax ...

Ajax不会将表单数据发送到servlet

3 个答案: