jQuery的传递和Servlet之间的数据 [英] Passing data between jQuery and Servlet
问题描述
我有一个HTML表单：
I have a HTML form:
<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>
欲使用脚本的顶部提取从该表格中的数据，并将它们发送到我的servlet。
I want to extract the data from that form using the script on the top and send them to my servlet.
下面是我的servlet code：
Here is my servlet code:
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);
}
}
和这里是我的的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>
我想在一个div我到底叫结果打印结果在我的HTML表单页面。我用PHP，一切都犯了同样的脚本工作正常，但在servlet。我可以让我产生了新的一页，但我不能把他们在同一个HTML页面。我该如何解决呢？
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?
推荐答案
下面，
$.ajax({
type: "POST",
url: "CurrencyConverter",
success: function(data) {
$('#results').show();
$('#results').html(data);
}
});
你有2个问题：
you have 2 problems:
-
您的servlet映射
/CurrencyConverter.do，但尚未你要调用它/ CurrencyConverter。你需要修复的URL。
Your servlet is mapped on
/CurrencyConverter.do, but yet you're trying to invoke it on/CurrencyConverter. You need to fix the URL.
你是不是通过所有的查询字符串 dataString 。你需要把它作为数据选项。
You are not passing the query string dataString at all. You need to pass it as data option.
所以，这应该做的：
$.ajax({
type: "POST",
url: "CurrencyConverter.do",
data: dataString,
success: function(data) {
$('#results').show();
$('#results').html(data);
}
});
请注意，虽然拼凑查询字符串一起自己可能在大多数情况下，它将会失败每当输入值包含特殊字符。你想传递一个JS对象，而不是沿中所示Akhil的回答。但更好的是只使用＆LT;形式GT; 和 jQuery.serialize（）。另请参见简单的计算器在JSP 一个开球的例子。
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 in JSP for a kickoff example.
这篇关于jQuery的传递和Servlet之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
