【问题标题】:How to clear previous search result shown by ajax success?如何清除ajax成功显示的先前搜索结果?
【发布时间】:2019-07-04 06:20:13
【问题描述】:

我想清除 ajax 搜索显示的所有搜索结果,例如当用户键入下一个查询时它会更新它。

 $(document).ready(function(){
    var text;
    $("#button").on('click',function (e) {
    e.preventDefault();
   var q=$("#q").val();
    $.ajax({

    url: "/search",
    data:  {q:q},
    type: "GET", 
    dataType : "json",
    success: function(result) { 
    var event_data = '';
    for (var i = 0; i < result.length; i++) {
                event_data += '<tr>';
                event_data += '<td>' + '<img src=' +result[i]['video']['thumbnail_src']+ '></img>' +'</td>';
                event_data += '<td>' +result[i]['video']['title']+'</td>';
                event_data += '<td>' +result[i]['video']['duration']+ '</td>';
                event_data += '<td>' + '<a href' +result[i]['video']['url']+ '>'+ "Download" +'</a>' +'</td>';
                event_data += '</tr>';
     }  $("#list_table_json").append(event_data);
    },
    error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         },
    always: function( xhr, status ) {
      alert( "The request is complete!" );
        }
    });
});


   });

这是我的表格的 html 文件,我在其中附加了 ajax 成功的结果,你们能告诉我另一种技术吗?我想清除以前的结果并更新新的结果。

搜索
<table class="table table-responsive table-hover table-bordered" id="list_table_json">
<thead>
    <tr>
        <th>Thumbnail</th>
        <th>Title</th>
        <th>Duration</th>    
        <th>Download</th>                
    </tr>                   
</thead>

【问题讨论】:

    标签: html json ajax get


    【解决方案1】:

    success 处理程序的开头,如果您想保留第一个 tr(标题)并删除其余数据,请使用以下代码

    $("#list_table_json").find("tr:gt(0)").remove();
    

    如果您想要删除所有内容,请使用

    $("#list_table_json").empty(); 
    

    另一种删除所有内容的方法

    $("#list_table_json").html('');
    

    如何使用?

    success: function(result) { 
        $("#list_table_json").find("tr:gt(0)").remove();
        var event_data = '';
    

    【讨论】:

    猜你喜欢
    • 2020-07-24
    • 2016-06-26
    • 1970-01-01
    • 2018-04-06
    • 2012-08-05
    • 1970-01-01
    • 2019-05-01
    • 1970-01-01
    相关资源
    最近更新 更多