如何将参数从ajax发送到servlet答案

【问题标题】：How to send parameters from ajax to servlet如何将参数从ajax发送到servlet
【发布时间】：2014-09-19 13:01:51
【问题描述】：

我正在尝试使用 servlet 和 ajax/javascript 添加 2 个数字。我得到 java.lang.NumberFormatException: 并且值为空。我可以知道如何将参数从 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>

【问题讨论】：

标签： javascript ajax servlets

【解决方案1】：

您正在使用非标准的自定义编码发送数据，但试图解析它，就好像它是使用标准表单 url 编码进行编码一样。

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

【讨论】：

我试过 xmlHttp.send("n1=" + value1 + "&n2=" + value2);还是一样

【解决方案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;
     } 
  }

【讨论】：

我刚开始学习JS，很快我也会学习jquery。但是你能不能把它转换成javascript。
尝试在将字符串发送到 servlet 之前使用 parseInt 将其转换为 int
我改成了 "n1=" + value1 + "&n2=" + value2，但其他问题在这里 document.getElementById("result").innerHTML 。我没有读取 value.after 更改为 document.getElementById("result").value 它起作用了。感谢您的所有帮助