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

时间:2015-08-03 20:55:10

标签: javascript jquery ajax

我是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()
});

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

1 个答案:

答案 0 :(得分: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
                   }));
            });
        });
    });
});