Java 使用 JQuery Ajax 将表单提交给 servlet
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20581259/
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
Submit form to servlet using JQuery Ajax
提问by CY5
How can we submit Form to servlet when we click on span tag using Jquery Ajax, and get output from servlet? Below is calculator example code. If instead of span if i use input type="submit" i get the right result in index.html, but if i use span instead of input type for submit, i am directed to servlet page.
当我们使用Jquery Ajax点击span标签时，我们如何将Form提交给servlet，并从servlet获取输出？下面是计算器示例代码。如果我使用 input type="submit" 而不是 span，我会在 index.html 中得到正确的结果，但是如果我使用 span 而不是 input type 进行提交，我将被定向到 servlet 页面。
index.html
索引.html
<form name="form1" method="POST" action="Ajaxexample" id="form1">
<table>
<tr>
<td>Number 1</td><td><input type="text" name="n1"/></td>
</tr>
<tr>
<td>Number 2</td><td><input type="text" name="n2"/></td>
</tr>
<tr>
<td></td><td><span onclick="form1.submit()">Calculate</span></td>
</tr>
<tr>
<td>Result</td><td><input type="text" value="" id="result"/></td>
</tr>
</table>
</form>
<script src="script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var form = $('#form1');
form.submit(function () {
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: value,
success: function (data) {
var result=data;
$('#result').attr("value",result);
}
});
return false;
});
</script>
Ajaxexample.java
ajax示例.java
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws
ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
out.println(n1 + n2 + "");
}
}
web.xml
网页.xml
<display-name>Ajax</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Ajaxexample</servlet-name>
<servlet-class>Ajaxexample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Ajaxexample</servlet-name>
<url-pattern>/Ajaxexample</url-pattern>
</servlet-mapping>
采纳答案by Kuldeep Choudhary
You have clearly written " onclick="form1.submit()">" that's why form is submitting....
您已经清楚地写了“ onclick="form1.submit()">” 这就是表单提交的原因....
Remove onClick() method from submit &
从提交和删除 onClick() 方法
<span id="calc">Calculate</span
& replace
＆ 代替
form.submit(function () {
line by
逐行
$( "#calc" ).click(function(){
回答by SpringLearner
you form method is post <form name="form1" method="POST" action="Ajaxexample" id="form1">but you are writing codes in servlet doGet()so you may not proper results.Remeber that if the form method is getthen in the servlet doGet()will be called and if the form method is postthen in servlet doPost()will be called
您的表单方法已发布，<form name="form1" method="POST" action="Ajaxexample" id="form1">但您正在 servlet 中编写代码，doGet()因此您可能无法获得正确的结果。请记住，如果表单方法get在 servlet 中，doGet()则将被调用，如果表单方法post在 servlet 中，doPost()则将被调用
回答by user3068680
<span onclick="formSubmit();">Calculate</span>
function formSubmit(){
$.ajax({
url:'localhost:8080/Ajax/Ajaxexample',
data: $("#form1").serialize(),
success: function (data) {
$('#result').html(data);
}
});
}
