Hi guys I am new to jquery and all these ajax calls I am developing a simple form that takes data from the user and sends it to the servlet and the servlet has to give back the result in json data format which must be displayed below the form and all this has to happen without page REFRESH.
My html code is
<script>
var form = $('#form1');
$(document).ready(function(){
$('body').hide().fadeIn(5000);
$(".submit").click(function (e) {
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
console.log(url);
data: $(form).serialize(),
success: function(msg){
var json = msg ;
$('#json').val(json);
}
});
});
});
</script>
<body><br>
<form name="input" action="/formsub" method="GET" id="form1" enctype="text/plain">
First name: <input type="text" name="FirstName" id="Firstname" value=" "><br>
Last name: <input type="text" name="LastName" value=" "><br>
<br>
Date Of Birth:
<select name="month" >
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day">
<option value="na">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year">
<option value="na">Year</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
</select>
<br>
<br>
<b>SEX</b><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<br>
<b>USER INTEREST<b><br>
<input name="interest" type="checkbox" value="singing "/>singing<br>
<input name="interest" type="checkbox" value="dancing"/>dancing<br>
<br>
<b>CITY<b><br><select name="city"><br>
<option value="bangalore">bangalore</option>
<option value="chennai">chennai</option>
<option value="hyderabad">hyderabad</option>
<option value="mumbai">mumbai</option>
</select>
<div>
<textarea id="json" rows="10" cols="50">
</textarea>
</div>
<br>
<input type="submit" value="Submit" class="submit">
<input type="reset" value="reset">
</form>
</body>
and my servlet code is package com.example.formsub;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.appengine.labs.repackaged.org.json.JSONObject;
public class FormsubServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
// Get the submitted form data that is sent from the web page
String firstName = request.getParameter("FirstName");
String lastName = request.getParameter("LastName");
String month = request.getParameter("month");
String day = request.getParameter("day");
String year = request.getParameter("year");
String sex = request.getParameter("sex");
String[] values = request.getParameterValues("interest");
String city = request.getParameter("city");
String arr=Arrays.toString(values);
//Encode the submitted form data to JSON
JSONObject obj=new JSONObject();
obj.put("firstname",firstName);
obj.put("lastname",lastName);
obj.put("month",month);
obj.put("day",day);
obj.put("year",year);
obj.put("sex",sex);
obj.put("interest",arr);
obj.put("city",city);
//Get the JSON formatted data
String jsonData = obj.toString();
//Return the JSON formatted data
out.write(jsonData);
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
actually i did some research and found that we have to mention return false after ajax call but the problem i am encountering is that the output is not geting displayed in the textarea i have mentioned in my html. The output i am expecting is that the json data returned by the servlet has to by displayed as it is in the text area of the form.
for reference during code implementation i used the url: http://helpx.adobe.com/adobe-cq/using/custom-sling-servlets.html
Please help a newbie.... Thanks in advance
You need to specify dataType of your response.
$.ajax({
dataType: 'json',
...
As per documentation, if none is specified, jQuery will try to infer it based on the MIME type of the response. As I see from your servlet code, you've specified wrong MIME type for your response : " text/html". So you didn't leave a chance to jQuery to "guess" that your response is in json format.
Also, it's good way to figure out what's going on using console.log in your success method:
success: function(msg){
console.log(msg);
Also see getJSON function
I am not able to track if the success function is called or not....can u plz let me know how to do it....i am not able to use console.log
As for this comment, you can always use browser console to track your request status, look at request and response bodies etc. For example, I use Chrome Dev Tools for that. But it's up to you to decide.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments