別の呼び出しの前にajax応答をクリアする方法

Question

私はこの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(); 

はこれで助けてください。

Answer 1

UPDATE：

それは、テーブルの内容を削除し、あなたの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'); 
      } 
     }); 
    }); 
}); 

Answer 2

代わりに.htmlを（HTML）機能を使用します。

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

または追記する前に最初の内容をクリア：

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