Javascript 通过ajax提交表单，通过JSON从servlet回复表单，无需页面刷新_Javascript_Jquery_Ajax_Json_Servlets

Javascript 通过ajax提交表单，通过JSON从servlet回复表单，无需页面刷新

javascript jquery ajax json servlets

Javascript 通过ajax提交表单，通过JSON从servlet回复表单，无需页面刷新,javascript,jquery,ajax,json,servlets,Javascript,Jquery,Ajax,Json,Servlets,大家好，我是jquery新手，所有这些ajax调用我都在开发一个简单的表单，从用户那里获取数据并发送到servlet，servlet必须以json数据格式返回结果，该格式必须显示在表单下方，所有这些都必须在不刷新页面的情况下进行我的html代码是 <script> var form = $('#form1'); $(document).ready(function(){ $('body').hide().fadeIn(5000); $(".submit").click(f

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

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

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

在代码实现过程中，我使用了url作为参考：

请帮助一个新手。。。。

提前感谢

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

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

根据，如果未指定，jQuery将尝试根据响应的MIME类型推断它。正如我从servlet代码中看到的，您为响应指定了错误的MIME类型：“text/html”。因此，您没有给jQuery留下机会来“猜测”您的响应是json格式的

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

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

也看到

我无法跟踪是否调用了success函数…您能告诉我怎么做吗…我无法使用console.log

对于这个评论，您可以始终使用浏览器控制台跟踪您的请求状态，查看请求和响应主体等。例如，我使用。但这取决于您的决定。

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

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

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

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

也看到

我无法跟踪是否调用了success函数…您能告诉我怎么做吗…我无法使用console.log

对于这个评论，您可以始终使用浏览器控制台跟踪您的请求状态，查看请求和响应主体等。例如，我使用。但这取决于您的决定。

使用此代码片段 var json=json.stringify（msg）； $（'#json'）.val（json）

使用此代码段 var json=json.stringify（msg）；

$（'#json'）.val（json）

正在调用成功回调函数吗？msg变量是否为空？我无法跟踪是否调用了成功函数…u plz能否让我知道如何执行此操作…我无法使用console.log…在您喜爱的浏览器中使用js调试器，并查看代码中发生了什么调用了成功回调函数？msg变量是否为空？我无法跟踪是否调用了success函数…u plz能否让我知道如何操作…我无法使用console.log…在您最喜欢的浏览器中使用js调试器，并查看代码中发生了什么我是否应该将内容类型从text/html更改为json？？在my servletyes中，servlet的客户端应该知道期望的内容。我应该将内容类型从text/html更改为json吗？？在my servletyes中，servlet的客户机应该知道期望的内容。