javascript 如何将参数从ajax发送到servlet
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25934559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to send parameters from ajax to servlet
提问by Sas
I am trying to add 2 numbers using servlets and ajax/javascript. I am getting java.lang.NumberFormatException: and the values are null. Can i know how to pass parameters from ajax to servlet.
我正在尝试使用 servlet 和 ajax/javascript 添加 2 个数字。我收到 java.lang.NumberFormatException: 并且值为空。我可以知道如何将参数从 ajax 传递到 servlet。
SumWithAjaxServlet.java
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
索引.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> </td>
<td><input type="button" id="calculate" value="calculate"
onclick="calc()" /></td>
</tr>
</table>
</form>
</body>
web.xml
网页.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>
回答by Quentin
You are sending your data using a non-standard, custom encoding, but trying to parse it as if it were encoded using the standard form url encoding.
您正在使用非标准的自定义编码发送数据，但尝试将其解析为使用标准形式的 url 编码进行编码。
Given, for the sake of example, that your values are 333and 555: You are sending the string 333,555. You need to send the string n1=333&n2=555.
举例来说，您的值是333和555：您正在发送字符串333,555。您需要发送字符串n1=333&n2=555。
回答by Sas
You can try using jquery to do the same with $.post. Something like this:
您可以尝试使用 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/
http://api.jquery.com/jquery.post/
Update:
更新：
As @Quentin mentioned you need to change:
正如@Quentin 提到的，你需要改变：
xmlHttp.send(value1 + "," + value2);
to
到
xmlhttp.send("n1=value1&n2=value2");
In addition you can try converting your values to integer before you passed it in like this:
此外，您可以在像这样传入之前尝试将值转换为整数：
var value1 = parseInt(document.getElementById("n1").value);
var value2 = parseInt(document.getElementById("n2").value);
Other than that everything look fine to me.
除此之外，我觉得一切都很好。
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;
}
}
