如何將參數從ajax發送到servlet

我想用servlet和ajax/javascript添加2個數字。我得到java.lang.NumberFormatException：和值爲空。我可以知道如何將參數從ajax傳遞給servlet。如何將參數從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>

來源

2014-09-19 user4058411

您要發送r數據使用非標準的自定義編碼，但試圖解析它，就好像使用標準表單url編碼進行編碼一樣。

考慮到，例如，您的值爲333和555：您正在發送字符串333,555。您需要發送字符串n1=333&n2=555。

來源

2014-09-19 13:06:11 Quentin

我試過像xmlHttp.send（「n1 =」+ value1 +「＆n2 =」+ value2）;仍然相同 – user4058411 2014-09-19 17:34:02

你可以嘗試使用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; 
    } 
    }

來源

2014-09-20 04:23:52 Sas

我剛剛開始JS，很快我也會學習jQuery。但是，請將它轉換爲JavaScript。 – user4058411 2014-09-20 04:28:03

嘗試將您的字符串轉換爲int，並將其發送到servlet – Sas 2014-09-20 16:43:03

我已更改爲「n1 =」+ value1 +「＆n2 =」+ value2，但其他問題在此處爲document.getElementById（「result」）。innerHTML。在更改爲document.getElementById（「result」）。value後，它不起作用。感謝你的幫助 – user4058411 2014-09-20 18:27:09

如何將參數從ajax發送到servlet

回答

相關問題