Question

您好我在jquery中使用ajax post和json来读取php的数据库输出。现在，一旦我获得数据onClick，如果我再次按下按钮，数据将再次填充在它下面。我想用新内容替换数据。我对jquery＆amp; amp;阿贾克斯。我正在使用的代码是：

    $.ajax({
type:'POST',
dataType: 'json',
url:'database.php',
data:{search: $("#search").val()},
success:function(rows){
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html($('#output').html() + '<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
        );
});

Answer 1

您可以使用empty()方法，然后使用append()新数据，请尝试以下操作：

success:function(rows){
    $('#output').empty(); // Removes all child nodes of the set of matched elements from the DOM.
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').append('<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
    };
}

Answer 2

你在做什么

output.html = output.html + x;

doing it 3 times will produce

(((output.html + x) + y) + z)

可能是你想要做的是

output.html = x;

如果您只想替换加载了Ajax的内容并保持其他行不变：

success:function(rows){
    if($('.ajaxloaded').length)$('.ajaxloaded').remove();
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

如果您的#output是表

，请检查@SangeethMenon是否建议使用

Answer 3

假设output是<tbody>

的<table>的ID

然后试试这个

$("#output").html("");

for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

否则output <table>本身的ID

然后试试这个

$("#output tbody").html("");


for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html('<tr class="ajaxloaded"><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>');
        }
    }

P.S。要保留表格的标题，您应将它们放在<thead>标记

中

ajax替换为数据库的新输出

3 个答案: