在 jQuery 和 Servlet 之间传递数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8136495/
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
Passing data between jQuery and Servlet
提问by Mpampinos Holmens
I have a HTML form:
我有一个 HTML 表单：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#convert').click(function(){
//pairno tis times ap tin forma
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
//kano ta dedomena ena koino string
var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "CurrencyConverter",
success: function(data){
//pairno ta dedomena
$('#results').show();
//vazo ta dedomena sto results div tag.
$('#results').html(data);
}
});
});
$('#swap').click(function() {
?
s1=$('#to').val(); ?
? s0=$('#from').val(); ?
? $('#to').val(s0); ?
? $('#from').val(s1);
});
});
</script>
</head>
<body>
<div class="data">
<label for="from">Μετ?τρεψε:</label>
<input type="text" name="amount" id="amount" value="1" />
</div>
<div class="data">
<label for="fromCurrency">απ?:</label>
<select name="from" id="from">
<option selected="" value="EUR">Euro - EUR</option>
<option value="USD">United States Dollars - USD</option>
<option value="GBP">United Kingdom Pounds - GBP</option>
<option value="CAD">Canada Dollars - CAD</option>
</select>
</div>
<div class="data">
<label for="to">σε:</label>
<select name="to" id="to">
<option value="USD">United States Dollars - USD</option>
<option value="GBP">United Kingdom Pounds - GBP</option>
<option value="CAD">Canada Dollars - CAD</option>
<option value="AUD">Australia Dollars - AUD</option>
<option value="JPY">Japan Yen - JPY</option>
</select>
</div>
<div class="data">
<input type="submit" value="Μετατροπ?">
<input type="submit" name="swap" id="swap" value="αντ?λλαξ? τα!">
</div>
</div>
<div id="results"></div>
</body>
</html>
I want to extract the data from that form using the script on the top and send them to my servlet.
我想使用顶部的脚本从该表单中提取数据并将它们发送到我的 servlet。
Here is my servlet code:
这是我的 servlet 代码：
package com.example.web;
import com.example.model.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URL;
import java.lang.*;
import java.util.*;
public class CurrencySelect extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response)throws IOException, ServletException{
//response.setContentType("text/html;charset=UTF-8");
String from = request.getParameter("from");
String to = request.getParameter("to");
String amount = request.getParameter("amount");
CurrencyGenerator curr = new CurrencyGenerator();
String res = curr.GetCurrency(from,to,amount);
out.println(res);
}
}
And here is my web.xmlfile:
这是我的web.xml文件：
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
Version="2.4">
<servlet>
<servlet-name>CurrencyConverter</servlet-name>
<servlet-class>com.example.web.CurrencySelect</servlet-class>
</servlet>
<servlet>
<servlet-name>CodeReturn</servlet-name>
<servlet-class>com.example.web.CodeReturn</servlet-class>
</servlet>
<servlet>
<servlet-name>Redirect</servlet-name>
<servlet-class>com.example.web.Redirect</servlet-class>
</servlet>
<servlet>
<servlet-name>ListenerTester</servlet-name>
<servlet-class>com.example.web.ListenerTester</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CurrencyConverter</servlet-name>
<url-pattern>/CurrencyConverter.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>CodeReturn</servlet-name>
<url-pattern>/CodeReturn.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Redirect</servlet-name>
<url-pattern>/Redirect.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ListenerTester</servlet-name>
<url-pattern>/ListenTest.do</url-pattern>
</servlet-mapping>
<context-param>
<param-name>report</param-name>
<param-value>report.html</param-value>
</context-param>
<listener>
<listener-class>com.example.model.MyServletContextListener</listener-class>
</listener>
</web-app>
I want to print the result in my html form page in a div I have in the end called results. I had the same script made with php and everything was working fine but with servlets. I can get my results in a new page, but I cannot take them in the same HTML page. How can I solve it?
我想在我的 html 表单页面中的一个 div 中打印结果，我最终称为结果。我用 php 制作了相同的脚本，一切正常，但使用 servlet。我可以在新页面中获取我的结果，但我不能在同一个 HTML 页面中获取它们。我该如何解决？
回答by BalusC
Here,
这里，
$.ajax({
type: "POST",
url: "CurrencyConverter",
success: function(data) {
$('#results').show();
$('#results').html(data);
}
});
you have 2 problems:
你有两个问题：
Your servlet is mapped on
/CurrencyConverter.do, but yet you're trying to invoke it on/CurrencyConverter. You need to fix the URL.You are not passing the query string
dataStringat all. You need to pass it asdataoption.
您的 servlet 已映射到
/CurrencyConverter.do，但您试图在 上调用它/CurrencyConverter。您需要修复 URL。您根本没有传递查询字符串
dataString。您需要将其作为data选项传递。
So, this should do:
所以，这应该做：
$.ajax({
type: "POST",
url: "CurrencyConverter.do",
data: dataString,
success: function(data) {
$('#results').show();
$('#results').html(data);
}
});
Note that although cobbling the query string together yourself may work in most cases, it will fail whenever the input values contain special characters. You want to pass a JS object along instead as shown in Akhil's answer. But much better is to just use a <form>and jQuery.serialize(). See also Simple calculator with JSP/Servlet and Ajaxfor a kickoff example.
请注意，尽管您自己将查询字符串拼凑在一起可能在大多数情况下可行，但只要输入值包含特殊字符，就会失败。您想要传递一个 JS 对象，如 Akhil 的回答所示。但更好的是只使用一个<form>and jQuery.serialize()。有关启动示例，另请参阅带有 JSP/Servlet 和 Ajax 的简单计算器。
回答by Akhil Thayyil
/*
Hi ,
just try changing the following code in javascript
*/
var dataString ={"amount":amount,"from":from,"to":to};
$.ajax({
type: "POST",
data:dataString,
url: "CurrencyConverter",
success: function(data){
//pairno ta dedomena
$('#results').show();
//vazo ta dedomena sto results div tag.
$('#results').html(data);
}
});
回答by dnuttle
A JSP page is itself a servlet...the servlet container compiles it behind the scenes. So you can refer to the request object inside the JSP file itself. So if the form's action is the name of the HTML page itself, then the results of the form will be visible. So for example you could put this in your JSP:
JSP 页面本身就是一个 servlet……servlet 容器在幕后编译它。因此，您可以在 JSP 文件本身内部引用请求对象。因此，如果表单的操作是 HTML 页面本身的名称，那么表单的结果将是可见的。例如，您可以将其放在 JSP 中：
<%= request.getParameter("amount")%>
You can also have your JSP action point at a servlet, and then have the servlet redirect back to the JSP. I don't remember the details off the top of my head, but again, this would mean that the request parameters would be visible to the JSP page.
您还可以将 JSP 操作点置于 servlet，然后让 servlet 重定向回 JSP。我不记得我头顶上的细节，但同样，这意味着请求参数对 JSP 页面是可见的。
