Передача данных между jQuery и сервлетом - PullRequest
Новая
       1

Передача данных между jQuery и сервлетом

3 голосов
/ 15 ноября 2011

У меня есть 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>

Я хочу извлечь данные из этой формы, используя скрипт вверху, и отправить их моему сервлету.

Вот мой код сервлета: 

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, который я в конце назвал результатов. У меня был тот же сценарий, сделанный с php, и все работало нормально, но с сервлетами. Я могу получить свои результаты на новой странице, но не могу взять их на той же HTML-странице. Как я могу решить это?

Ответы [ 3 ]

7 голосов
/ 15 ноября 2011

Здесь 

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

у вас 2 проблемы:

  1. Ваш сервлет назначен на /CurrencyConverter.do, но вы пытаетесь вызвать его на /CurrencyConverter. Вам нужно исправить URL.

  2. Вы не передаете строку запроса dataString. Вам нужно передать его как data параметр.

Итак, это должно сделать: 

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

Обратите внимание, что, хотя комбинирование строки запроса самостоятельно может работать в большинстве случаев, оно завершится неудачно, когда входные значения содержат специальные символы. Вместо этого вы хотите передать объект JS, как показано в ответе Ахила. Но гораздо лучше просто использовать <form> и jQuery.serialize(). См. Также Простой калькулятор с JSP / Servlet и Ajax для примера запуска.

1 голос
/ 15 ноября 2011 
/*
 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);
            }
         });
0 голосов
/ 15 ноября 2011

Страница JSP сама по себе является сервлетом ... контейнер сервлетов компилирует ее за кулисами. Таким образом, вы можете ссылаться на объект запроса внутри самого файла JSP. Таким образом, если действие формы - это имя самой HTML-страницы, то результаты формы будут видны. Например, вы можете поместить это в свой JSP: 

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

Вы также можете указать свою точку действия JSP на сервлете, а затем перенаправить сервлет обратно на JSP. Я не помню подробностей в голове, но опять же это будет означать, что параметры запроса будут видны странице JSP.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...