javascript 在表中显示 ajax 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33453330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display ajax response in Table
提问by user1894647
display.html :
显示.html：
<div id="display_result" style="display: none"><table class="table">
<p style="float: right;" >Select All<input type="checkbox" class="allcb" data-child="chk" checked/> </p>
<thead>
<tr>
<th>Die No</th>
<th> Status </th>
<th> Location </th>
<th>Select</th>
</tr>
</thead>
<tbody>
</table>
<div id ="issue_button">
<input type="submit" id="submit" class="btn btn-success " value="Recieve" style="width: 150px;"></div>
</div>
Ajax:
阿贾克斯：
var data = JSON.stringify($("#form").serializeArray());
// alert(data);
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type: 'POST',
data: {
list: data
},
url: 'die_recieving_process.php',
success: function(data) ){
$('#display_result').html(data);
}
});
die_recieving_process.php
die_receiving_process.php
while($fetch = mysql_fetch_array($query))
{
if($fetch[1] == "Table Rack" )
{
echo '<tr class="success"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] </td> </tr>';
}
else
{
echo '<tr class="warning"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] checked </td> </tr>';
}
}
Hi friends in display.html I have to display the result processed in die_recieving_process.php . In ajax i've sent all the value to die_recieving_process.php and after fetching the result i've to display the result in display.html
嗨， display.html 中的朋友，我必须显示在 die_receiving_process.php 中处理的结果。在 ajax 中，我已将所有值发送到 die_recieving_process.php，在获取结果后，我必须在 display.html 中显示结果
回答by Marina K.
Firstin you Javascript, you have 2 errors: Your code overrides existing contents of div, which is the whole table... And you have one unnecessary bracket in success function declaration
首先，在您的 Javascript 中，您有 2 个错误：您的代码覆盖了 div 的现有内容，即整个表格......并且您在成功函数声明中有一个不必要的括号
So change this:
所以改变这个：
success: function(data) ){
$('#display_result').html(data);
}
To this:
对此：
success: function(data) {//remove unnecessary bracket
$('#display_result tbody').html(data);//add data - to tbody, and not to the div
}
By the way, using $.post()you can write your javascript code shorter, like this:
顺便说一句，使用$.post()您可以编写更短的 javascript 代码，如下所示：
var data = JSON.stringify($("#form").serializeArray());
$.post('die_recieving_process.php',{list:data},function(responseData){
$('#display_result tbody').html(responseData); //added to tbody which is inside #display_result
$('#display_result').show();
});
Secondyou need to close your tbody tag inside the table
其次，您需要关闭表格内的 tbody 标签
回答by Ashraf Abusada
Create html table with empty body tags and body id = tBodyfor example:
创建带有空 body 标签和 body id = 的 html 表，tBody例如：
<table>
<caption>Smaple Data Table</caption>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
Use the jquery ajax to load json data in the created table after load button is clicked assuming that my json file is storing userDatalike userName, age, city:
单击加载按钮后，使用 jquery ajax 在创建的表中加载 json 数据，assuming that my json file is storing userData如下所示userName, age, city：
$('#btnLoadAll').click(function () {
$.ajax({
url: "url/data.json",
dataType: 'json',
success: function (resp) {
var trHTML = '';
$.each(resp, function (i, userData) {
for (i = 0; i < resp.UserData.length; i++) {
trHTML +=
'<tr><td>'
+ resp.userData[i].userName
+ '</td><td>'
+ resp.userData[i].age
+ '</td><td>'
+ resp.userData[i].city
+ '</td></tr>';
}
});
$('#tBody').append(trHTML);
},
error: function (err) {
let error = `Ajax error: ${err.status} - ${err.statusText}`;
console.log(error);
}
})
});
回答by mnv
If you do not see result, try to remove style="display: none"in display.html
如果您没有看到结果，请尝试style="display: none"在 display.html 中删除
