Question

我正在尝试使用servlet和ajax / javascript添加2个数字。我收到java.lang.NumberFormatException：并且值为null。我可以知道如何将参数从ajax传递给servlet。

SumWithAjaxServlet.java

public class SumWithAjaxServlet extends HttpServlet  {
     protected void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException
        {
            PrintWriter out = response.getWriter();

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

的index.jsp

<script type="text/javascript">
  function calc() 
{ 
    var xmlHttp = new XMLHttpRequest(); 
    var value1 = document.getElementById("n1").value; 
    var value2 = document.getElementById("n2").value; 

    xmlHttp.open("POST", "SumWithAjaxServlet", true); 
    xmlHttp.send(value1 + "," + value2); 

    var result = document.getElementById("result"); 
    result.innerHTML = xmlHttp.responseText; 
}
</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>

的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>

    <servlet>
        <servlet-name>SumWithAjaxServlet</servlet-name>
        <servlet-class>SumWithAjaxServlet</servlet-class>
    </servlet>

    <servlet-mapping>
            <servlet-name>SumWithAjaxServlet</servlet-name>
            <url-pattern>/SumWithAjaxServlet</url-pattern>
    </servlet-mapping>

   <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
   </welcome-file-list> 

</web-app>

Answer 1

您使用非标准的自定义编码发送数据，但尝试解析它，就像使用标准表单网址编码进行编码一样。

为了举例，我们假设您的值为333和555：您正在发送字符串333,555。您需要发送字符串n1=333&n2=555。

Answer 2

您可以尝试使用jquery对$.post执行相同的操作。像这样：

var value1 = $("#n1").val(); 
var value2 = $("#n2").val();
$.post( "SumWithAjaxServlet", { n1: value1, n2: value2})
.done(function( data ) {
 result.innerHTML = data;
});

http://api.jquery.com/jquery.post/

<强>更新

正如@Quentin所说，你需要改变：

xmlHttp.send(value1 + "," + value2);

到

xmlhttp.send("n1=value1&n2=value2");

此外，您可以尝试将值转换为整数，然后再将其传递给整数：

 var value1 = parseInt(document.getElementById("n1").value); 
 var value2 = parseInt(document.getElementById("n2").value);

除此之外，一切看起来都不错。

  var asyncRequest;
  function getSum()
  {
     var value1 = parseInt(document.getElementById("n1").value); 
     var value2 = parseInt(document.getElementById("n2").value);
     var url ="SumWithAjaxServlet";
     try
     {
        asyncRequest = new XMLHttpRequest();
        asyncRequest.addEventListener("readystatechange", stateChange, false); 
        asyncRequest.open( "POST", url, true );
        asyncRequest.send("n1=" + value1 + "&n2=" + value2); 
     }
     catch ( exception )
     {
        alert( "Request failed." );
     }
  } 

  function stateChange()
  {
     if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
     {
        document.getElementById("result").innerHTML =asyncRequest.responseText;
     } 
  }

如何将参数从ajax发送到servlet

2 个答案: