Я хочу называть функцию getTestStatus
каждые 10 sec
Это проверяет, существуют ли какие-либо данные или нет, если они существуют, чтобы получить данные и отобразить их в таблице. но то, что происходит в приведенной выше таблице кодов, создается каждые 10 секунд. Мне нужно создать таблицу на основе полученных данных (мой цикл содержит только 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>
Несколько проблем с вашим кодом.
$.each
использовать $.each
для простых html
данных. Использование формата данных JSON намного лучше.В любом случае, самое быстрое решение без изменения кода на стороне сервера:
<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 и в противном случае завершится иначе, что намного лучше, чем проверка того, что ваш ответ не будет пустым;
На стороне сервера вы можете использовать json_encode
для обеспечения правильного ответа, если используете PHP, другие языки также имеют аналогичные функции.
Вы не создаете таблицу каждый раз, вы можете просто обновить основную часть таблицы при каждом вызове 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");
});
}
testResult
html != ""
определенно не собирается это гарантировать. попробуйте предупредить значение html и посмотрите, что будет, если html не является верным html.