javascript - 通过ajax提交表单并通过JSON从servlet回复而不刷新页面

Question

大家好，我是 jquery 的新手，所有这些 ajax 调用我正在开发一个简单的表单，它从用户那里获取数据并将其发送到 servlet，servlet 必须以 json 数据格式返回结果，该结果必须显示在表单下方所有这一切都必须在没有页面REFRESH的情况下发生。

我的html代码是

<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>

我的servlet代码是包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();
          }
        }
    }

实际上我做了一些研究，发现我们必须在ajax调用后提到return false，但我遇到的问题是输出没有显示在我在html中提到的textarea中。我期望的输出是 servlet 返回的 json 数据必须在表单的文本区域中显示。

为了在代码实现期间参考，我使用了 url： http ://helpx.adobe.com/adobe-cq/using/custom-sling-servlets.html

请帮助新手....在此先感谢

score 1 · Accepted Answer

您需要指定响应的数据类型。

$.ajax({
dataType: 'json',
...

根据文档，如果没有指定，jQuery 将尝试根据响应的 MIME 类型推断它。正如我从您的 servlet 代码中看到的，您为响应指定了错误的 MIME 类型：“text/html”。所以你没有让 jQuery 有机会“猜测”你的响应是 json 格式。

此外，这是了解在成功方法中使用 console.log 发生了什么的好方法：

success: function(msg){
    console.log(msg);

另见getJSON 函数

我无法跟踪是否调用了成功函数....你能告诉我怎么做吗....我无法使用 console.log

至于这条评论，您可以随时使用浏览器控制台来跟踪您的请求状态、查看请求和响应正文等。例如，我使用Chrome 开发工具。但由您决定。

score 0 · Accepted Answer

0

使用此代码片段 var json = JSON.stringify(msg); $('#json').val(json);

于 2013-08-23T08:51:53.313 回答

javascript - 通过ajax提交表单并通过JSON从servlet回复而不刷新页面

2 回答 2

Related

Reference