Jquery Ajax 调用 servlet答案

【问题标题】：Jquery Ajax call to servletJquery Ajax 调用 servlet
【发布时间】：2012-06-04 10:24:44
【问题描述】：

我正在尝试使用 JQuery 对返回 JSON 对象的 servlet 进行 Ajax 调用。在JSP页面中我有一个表单，起初我不知道如何从表单中获取数据，然后我找到了.serialize。

我有以下 JavaScript：

$(document).ready(function() {
    $("#submit").click(function blabla() {
        var formData = $('form').serialize();
        $.ajax({
            type: "POST",
            url: "/ArchiveSearch/Search",
            dataType: "json",
            data: formData,
        });
    });
});

信息来自以下表格：

<form method= post">
            <div class="searchCiteria">
                <div id="searchValueBlock1">
                        <div><span class="label">Case ID:</span><input type="text" name="messagecaseid"  size="25"/></div>
                        <div><span class="label">Onderwerp:</span><input type="text" name="messagesubject" size="25" /></div>
                        <div><span class="label">Afzender:</span><input type="text" name="messagesender"  size="25"/></div>
                        <div><span class="label">Ontvanger:</span><input type="text" name="messagereceiver"  size="25"/></div>
                </div>

                <div id= "searchValueBlock2">
                    <div><span class="label">Datum:</span><input type="text" name="date1"  size="25"/></div>
                    <div><span class="label"></span><input type="text" name="date2"  size="25"/></div>

                    <div class="submit">
                        <input type="submit" value="Search"> 
                    </div>
                </div>
            </div>
            </form>

当我在表单中使用 action 参数时，servlet 会做出应有的响应。但我似乎无法让 Ajax 调用正常工作。

我做错了什么？

【问题讨论】：

相关：stackoverflow.com/questions/4114742/simple-calculator-in-jsp 答案基本上是一个使用 Ajax 和 JSP/Servlet 的迷你教程。

标签： ajax jsp servlets

【解决方案1】：

您必须将成功参数添加到 ajax 函数

$.ajax({
            type: "POST",
            url: "/ArchiveSearch/Search",
            dataType: "json",
            data: formData,
 success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

【讨论】：

它起作用了，数据变量保存了来自服务器的响应，我在问，因为当我成功时：function(data){alert(data)} 我没有看到任何弹出窗口
当我在数据函数之后添加一个额外的警报时，我确实看到了两个警报

【解决方案2】：

提交按钮的默认行为是POST 表单，这会将用户重定向到表单上action 属性的URL。当你没有（你应该......）有一个动作属性时，它将重新加载页面。为了防止页面重新加载，您需要通过在 $("#submit").click 函数的末尾返回 false 来防止默认行为。

【讨论】：