Javascript 如何将参数从ajax发送到servlet_Javascript_Ajax_Servlets

Javascript 如何将参数从ajax发送到servlet

javascript ajax servlets

Javascript 如何将参数从ajax发送到servlet,javascript,ajax,servlets,Javascript,Ajax,Servlets,我尝试使用servlet和ajax/javascript添加2个数字。我得到java.lang.NumberFormatException:并且值为null。我可以知道如何将参数从ajax传递到servlet吗 SumWithAjaxServlet.java public class SumWithAjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request,HttpServlet

我尝试使用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>


函数计算（）
{ 
var xmlHttp=new XMLHttpRequest（）；
var value1=document.getElementById（“n1”）.值；
var value2=document.getElementById（“n2”）.值；
open（“POST”，“SumWithAjaxServlet”，true）；
send（value1+“，”+value2）；
var result=document.getElementById（“结果”）；
result.innerHTML=xmlHttp.responseText；
}
输入第一个数字：
输入第二个数字：
结果:

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>


SumWithAjaxServlet
SumWithAjaxServlet
SumWithAjaxServlet
/SumWithAjaxServlet
index.jsp

您正在使用非标准的自定义编码发送数据，但尝试将其解析为使用标准格式url编码

例如，假设您的值是

和

：您正在发送字符串

。您需要发送字符串

n1=333&n2=555

您可以尝试使用jquery对

$执行相同的操作。大概是这样的：
var value1 = $("#n1").val(); 
var value2 = $("#n2").val();
$.post( "SumWithAjaxServlet", { n1: value1, n2: value2})
.done(function( data ) {
 result.innerHTML = data;
});

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


更新：
正如@Quentin提到的，您需要更改：
xmlHttp.send(value1 + "," + value2); 

到
此外，您可以尝试在传入值之前将值转换为整数，如下所示：
var value1 = $("#n1").val(); 
var value2 = $("#n2").val();
$.post( "SumWithAjaxServlet", { n1: value1, n2: value2})
.done(function( data ) {
 result.innerHTML = data;
});

 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;
     } 
  } 

我尝试了xmlHttp.send（“n1=“+value1+”&n2=“+value2”）；尽管如此，sameI刚刚开始学习JS，不久我也将学习jquery。但请将其转换为javascript。在将字符串发送到servleti之前，请尝试使用parseInt将字符串转换为int。我将其更改为“n1=“+value1+”&n2=“+value2”，但另一个问题是document.getElementById（“结果”）.innerHTML。在更改为document.getElementById（“结果”）后，我没有读取value。谢谢你的帮助