jQuery代碼，用於在調用setInterval時附加表格

Question

我想調用getTestStatus函數，每10 sec。它用於檢查數據是否存在，是否存在提取數據並顯示在表格中。 但什麼在上面的代碼表的情況是創建的每個10個sec.i只需要根據數據創建中取得。（我僅環包含3個值）。

interval = setInterval(function() { 
     getTestStatus(len, $('#server').val()); 
    },1000); 

...

function getTestStatus(len, server) { 
    var string1 = '<table border="1"><tr><td>No</td><td>Testcase</td> <td>OS</td> <td>Browser</td> <td>Steps</td> <td>Result</td></tr><!--REPORT_BODY--></table>'; 
     $.ajax({ 
     url: '/getReports', 
     cache: false 
     }).done(function (html) { 
     if (html != "") { 
      $('#testResult').show(); 
      $.each(html, function (i, data) { 
    string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>'; 

    }); 
     $('#testResult').append(string1); 
     } 

     }).fail(function() { 
     $('#edit').removeAttr("disabled"); 
     }); 
    } 

<div id="testResult" style="padding-left: 120px; "></div> 

Answer 1

您沒有每次都創建表格，您可以在每個ajax調用上更新表格的正文部分。同時指定dataType:json，因爲您正在等待來自服務器的json數據。

HTML

<table border="1" id="reportTab"> 
<thead> 
    <tr> 
    <th>No</th> 
    <th>Testcase</th> 
    <th>OS</th> 
    <th>Browser</th> 
    <th>Steps</th> 
    <th>Result</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

JS功能

function getTestStatus(len, server,string1) { 
     $.ajax({ 
     url: '/getReports', 
     cache: false 
     }).done(function (html) { 
     if (html != "") { 
     var string1 = ''; 
      $('#testResult').show(); 
      $.each(html, function (i, data) { 
    string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>'; 

    }); 
     $("#reportTab > tbody").html("");//clear the tbody 
     $('#reportTab > tbody').append(string1);//append the new data 
     } 

     }).fail(function() { 
     $('#edit').removeAttr("disabled"); 
     }); 
    } 

Answer 2

的幾個問題與您的代碼。

1. 對於普通的html數據，使用$.each並不好。使用JSON數據格式要好得多。
2. 每次您ping一個腳本時都不好創建一個新表格 - 這是一場噩夢般的性能表現。所以，你應該做的是靜態創建你的表格，只添加新的行。
3. 你現在所做的只是獲取每一份報告並將其插入表格。也許你可以做一些事情，只確定你的服務器上的新報告？

總之，在不改變服務器端代碼最快的解決方法是：

<script> 
    // Why do you pass parameters, if you don't use any of them? 
    function getTestStatus() { 
     $.ajax({ 
      url: "/getReports", 
      cache: false, 
      dataType: "JSON" 
     }).done(function(response){ 
      var thead = $("</thead>").html("<tr><th>No</th><th>Testcase</th><th>OS</th><th>Browser</th><th>Steps</th><th>Result</th></tr>"); 
      var tbody = $("</tbody>").html(
       $.map(response, function(data, index){ 
        return '<tr><td rowspan="3">'+index+'</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>'; 
       }); 
      ); 
      var table = $("</table>").append(thead).append(tbody); 
      $("#testResult").html(table); 
     }).fail({ 

      //if no report -- hide the table 

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

      $('#edit').removeAttr("disabled");     
     }); 
    }  
</script> 

如果指定"json"作爲dataType你會觸發done()只有當你的迴應是一個JSON值，失敗，否則，這遠遠好於檢查你的回答是否爲空;

如果您使用PHP，服務器端可以使用json_encode提供正確的響應，其他語言也具有相似的功能。