Ajax Servlet 问题答案

【问题标题】：Ajax Servlet IssueAjax Servlet 问题
【发布时间】：2023-03-07 06:13:01
【问题描述】：

这里的问题是，如果我进行搜索，则在该过程完成后不久返回结果，页面将更改为带有 json 原始数据的 servlet。我在这里很困惑。

这个 JSP 提交表单

<form class="col-lg-12" action="./urllinks" method="GET" id="searchform">

                        <div class="input-group"
                            style="width: 340px; text-align: center; margin: 0 auto;">
                            <input class="form-control input-lg" title="Make a wish !."
                                placeholder="Go on and search ! Don't be shy :p" type="text" id="box"
                                name="query"> <span class="input-group-btn"><button
                                    class="btn btn-lg btn-primary" id="searchresult" type="submit">Search</button></span>
                        </div>

</form>

这是 Servlet doGET

    String word = request.getParameter("query");
    List<Page> results = DynamoDbMethods.search(word);

    String reply = new Gson().toJson(results); 

    response.setContentType("text/json"); 
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write(reply);

这是 Javascript AJAX

$('#searchform').submit(function(){
            var query = $("#box").val();

        //  alert(query);
            $.ajax({
              target:"#map", 
                dataType: "json",
                type: 'GET',
                data:{query: query},
                url: 'http://localhost:8080/path/urllinks',
                success: function(response) {
                    successCallback(response);}

          });
        });

function successCallback(responseObj){
  #This function just prints the data on a table
  #e.g 
 $.each(responseObj, function(index, element){ alert(element.title);}

}

我试图消除：action="./urllinks" method="GET" 但没有数据

【问题讨论】：

标签： javascript ajax jsp

【解决方案1】：

看起来您没有阻止触发默认的非 ajax 表单提交。

您的函数可以接受一个事件参数，您可以使用它来防止默认值。

$(document).ready(
    function () {   
        $('#searchform').submit(   
            function(event) {
                event.preventDefault();
                //rest of code
            }
        );
    }
);

实际上在下面有一个 Jquery 插件，您可以将所有样板文件减少到几行 js。

http://jquery.malsup.com/form/

【讨论】：