Passing data between jQuery and Servlet
Solution 1
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
dataString
at all. You need to pass it asdata
option.
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 Ajax for a kickoff example.
Solution 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);
}
});
Comments
-
Mpampinos Holmens almost 2 years
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>
I want to extract the data from that form using the script on the top and send them to my servlet.
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); } }
And here is my
web.xml
file:<?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?