在 jQuery 和 Servlet 之间传递数据答案

【问题标题】：Passing data between jQuery and Servlet在 jQuery 和 Servlet 之间传递数据
【发布时间】：2011-12-29 12:08:52
【问题描述】：

我有一个 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>

我想使用顶部的脚本从该表单中提取数据并将它们发送到我的 servlet。

这是我的 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);

}

}

这是我的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>

我想将结果打印在我的 html 表单页面中的一个 div 中，我最终称为 results。我用 php 编写了相同的脚本，一切正常，但使用 servlet。我可以在一个新页面中获得我的结果，但我不能将它们放在同一个 HTML 页面中。我该如何解决？

【问题讨论】：

标签： jquery html ajax forms servlets

【解决方案1】：

这里，

$.ajax({
    type: "POST",
    url: "CurrencyConverter",
    success: function(data) {
        $('#results').show();
        $('#results').html(data);
    }
});

你有两个问题：

您的 servlet 已映射到 /CurrencyConverter.do，但您试图在 /CurrencyConverter 上调用它。您需要修复 URL。
您根本没有传递查询字符串dataString。您需要将其作为data 选项传递。

所以，应该这样做：

$.ajax({
    type: "POST",
    url: "CurrencyConverter.do",
    data: dataString,
    success: function(data) {
        $('#results').show();
        $('#results').html(data);
    }
});

请注意，尽管在大多数情况下您自己将查询字符串拼凑在一起可能会奏效，但只要输入值包含特殊字符，它就会失败。您想传递一个 JS 对象，如 Akhil 的回答所示。但更好的是只使用<form> 和jQuery.serialize()。有关启动示例，另请参阅 Simple calculator with JSP/Servlet and Ajax。

【讨论】：

【解决方案2】：

/*
 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);
            }
         });

【讨论】：

它什么也没做，这是奇怪的事情，它什么也不返回它没有响应，如果我更改我的 html 代码并在上面放置一个
表单和
并删除顶部的脚本一切正常，但我在新的 html 页面上得到结果

【解决方案3】：

JSP 页面本身就是一个 servlet……servlet 容器在后台编译它。因此，您可以在 JSP 文件本身中引用请求对象。因此，如果表单的操作是 HTML 页面本身的名称，那么表单的结果将是可见的。因此，例如，您可以将其放在您的 JSP 中：

<%= request.getParameter("amount")%>

您还可以将 JSP 操作点放在 servlet 上，然后让 servlet 重定向回 JSP。我不记得我脑海中的细节了，但同样，这意味着请求参数将对 JSP 页面可见。

【讨论】：

首先我没有 .jsp 页面，其次我想将数据从表单获取到 servlet 并返回到保存表单的页面！