Question

我是web dev的初学者，并构建了一个简单的查询 - 答案Web应用程序，其中用户在文本字段中输入查询并单击按钮，JavaScript将POST请求发送到服务器，服务器发回响应。现在，此响应应显示在屏幕上，直到用户输入新查询并再次单击该按钮。

这是客户端代码

$(document).ready(function() {
    $("button").click(function() {
        $.post("ServletServer", {
            Query: document.getElementById("query").value
        },
        function(data, status) {
            var json_x = $.parseJSON(data);
            $.each(json_x, function(index, element) {
                $('#Results').append($('<div>', {
                    text: index+" "+element.URI
                }));
            });
        });
    });
});

当我尝试使用之前一些问题中提到的window.location.reload（）时，如下所示：

$("button").click(function() {
    window.location.reload()
});

在显示响应后立即刷新页面。我希望响应留在页面上，直到用户再次单击按钮。任何人都可以告诉我哪里出错了

Answer 1

在使用$('#Results').html("");

执行POST请求之前，您需要清除结果div

$(document).ready(function(){
    $("button").click(function(){
        $('#Results').html(""); // clears the results, then does the ajax request.

        $.post("ServletServer",
            {
                  Query: document.getElementById("query").value
            },
            function(data, status){
                doRequest = false; // update flag
                var json_x = $.parseJSON(data);
                $.each(json_x, function(index, element) {
                    $('#Results').append($('<div>', {
                        text: index+" "+element.URI
                   }));
            });
        });
    });
});

按钮上的页面刷新仅在Ajax POST请求期间单击

1 个答案: