如何在另一个呼叫之前清除 ajax 响应答案

【问题标题】：How to clear ajax response before another call如何在另一个呼叫之前清除 ajax 响应
【发布时间】：2017-10-24 08:09:24
【问题描述】：

我有这个用数据填充表格的 Ajax 调用。但是，当我再次进行相同的调用时，它会同时加载新数据和旧数据。如何在加载新数据之前清除旧数据？

$(function() {
$('#subject_search_btn').click(function() {
    var student_id = $('#search').val();
    var year = $('#year').val();
    var term = $('#term').val();
    var classs = $('#formclass').val();

    $.ajax({
        "url": "/search_student_results",
        "data": {"studentid":student_id, "year":year, "term":term, "formclass":classs},
        "type": "get",
        "dataType": "json",
        "success": function(data) {
            if (data.length == 0){
                alert(year+' '+'Term'+' '+term+' '+'Results not found');
            }
            else
            var trHTML = '';
            $.each(data, function (i, item) {
                trHTML += '<tr>' +
                    '<td>' + item.subject.name + '</td>' +
                    '<td>' + item.score + '</td>' +
                    '<td>' + item.position + '</td>' +
                    '<td>' + item.remark + '</td>' +
                    '</tr>';
            });
            $('#subject_tbody').append(trHTML);
        },
        "error": function() {
            alert(year+' '+'Term'+' '+term+' '+'Results not found');
        }
    });
});
});

我尝试过失败

var subject_score = $('.subjectscore').filter(function() {
                        subject_score.empty();

或：

            var subject_score = $('.subjectscore').filter(function() {
                subject_score.parent().parent().remove();

请帮忙。

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

更新：

它将删除表格的内容，添加您的 cleardata，然后您的 ajax 接收数据。

$(function() {
    $('#subject_search_btn').click(function() {
        var student_id = $('#search').val();
        var year = $('#year').val();
        var term = $('#term').val();
        var classs = $('#formclass').val();

        $.ajax({
            "url": "/search_student_results",
            "data": {"studentid":student_id, "year":year, "term":term, "formclass":classs},
            "type": "get",
            "dataType": "json",
            "success": function(data) {
                if (data.length == 0){
                    alert(year+' '+'Term'+' '+term+' '+'Results not found');
                }
                else
                {
                    $('#subject_tbody').empty();
                    var clearHTML = '<tr> <td class="cleardata"></td> <td class="cleardata"></td> <td class="cleardata"></td> <td class="cleardata"></td> </tr>';
                    var trHTML = '';
                    $.each(data, function (i, item) {
                        trHTML += '<tr>' +
                            '<td>' + item.subject.name + '</td>' +
                            '<td>' + item.score + '</td>' +
                            '<td>' + item.position + '</td>' +
                            '<td>' + item.remark + '</td>' +
                            '</tr>';
                    });
                    $('#subject_tbody').append(clearHTML);
                    $('#subject_tbody').append(trHTML);
                }
            },
            "error": function() {
                alert(year+' '+'Term'+' '+term+' '+'Results not found');
            }
        });
    });
});

【讨论】：

Wouter Bouwman，这是一个 td 类。
我已经更新了我的答案。这是你想要的吗？它将首先删除内容。然后它会将 cleardata 添加回来，然后 ajax 接收到学生数据。
非常感谢。正是我想要的。

【解决方案2】：

改用 .html(html) 函数：

$('#subject_tbody').html(trHTML);

或者在追加之前先清除内容：

$('#subject_tbody').html('').append(trHTML);

【讨论】：

Folkert，您的建议是不加载任何数据。我猜它是在加载数据后清除的。我尝试将它放在 $('#subject_search_btn').click(function() { 和 $.each(data, function (i, item) { 之后。两者都给了我相同的结果。
您应该将$('#subject_tbody').append(trHTML); 替换为我回答中的两个示例之一。哦，我认为您在 ajax 成功函数中的“else”之后缺少大括号。
您也可以在点击处理程序中插入$('#subject_tbody').html('<tr><td colspan="4">Loading...</td></tr>'); 作为您的第一行以显示加载消息...

【解决方案3】：

clearconsole();功能可以帮助

$(document).on("click", ".class, function(e) { 
    $.ajax({
        dataType: 'json',
        url: "/ajax/getData.php",
        type: "POST",
        success: function(data){                

        },error: function(){

    });
    clearconsole();
 });

这在您使用 load(); 时有效带有带有 ajax 代码的页面。每次加载（）时似乎都会执行ajax；页面不刷新浏览器

【讨论】：