在Table中显示ajax响应 [英] Display ajax response in Table

问题描述

display.html：

 < div id =display_resultstyle =display：none>< table class =table> 
 
< thead> 
< tr> 
< th> Die No< / th> 
< th>状态< / th> 
< th>位置< / th> 
< th>选择< / th> 
< / tr> 
< / thead> 
< tbody> 
< / table> 
< div id =issue_button> 
< input type =submitid =submitclass =btn btn-successvalue =Recievestyle =width：150px;>< / div> 
< / div> 
  

Ajax：

  var data = JSON.stringify（$（＃form）。serializeArray（））; 
 // alert（data）; 
 $ .ajax（{//在POST中使用Ajax将证书值发送到另一个checker.php menthod 
类型：'POST'，
 data：{
 list：data 
}，
 url：'die_recieving_process.php'，
 success：function（data））{
 $（'＃display_result'）。html（data）; 
} 
}）; 
  

die_recieving_process.php

  while（$ fetch = mysql_fetch_array（$ query））
 {
 if（$ fetch [1] ==Table Rack）
 {
 echo '< tr class =success>< td>'。$ fetch [0]。'< / td>< td>'。 ;'。$ fetch [3]。 < / TD> < td>< input type = checkbox class =chkid = 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 =chkid = check_box value ='。$ fetch [2]。'name = check_list [] checked< / td> < / TR>; 
 
 
 $ / code $ / pre 
 
 
你好朋友在display.html我必须显示结果在die_recieving_process.php中处理。在ajax中，我将所有的值发送到die_recieving_process.php，并在获取结果后，将结果显示在display.html中。 
 
解决方案
 在你的JavaScript中，你有2个错误：
你的代码覆盖div的现有内容，这是整个表... 
你有一个不必要的在成功函数声明中支架 
 
 
所以改变这个：
 
 pre $ 成功：函数（数据））{
 $（'＃display_result'）。html（data）; 
} 
  

至此：



  success：function（data）{//移除不必要的括号
 $（'＃display_result tbody'）。html（data）; //将数据添加到tbody，而不是div 
} 
  

顺便说一句，使用 $。post（）你可以编写较短的JavaScript代码，如下所示：

  var data = JSON.stringify（$（＃form）。serializeArray（））; 
 $ .post（'die_recieving_process.php'，{list：data}，function（responseData）{
 $（'＃display_result tbody'）。html（responseData）; //添加到tbody中，里面#display_result 
 $（'＃display_result'）。show（）; 
}）; 
  

第二您需要关闭表格中的tbody标记

display.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

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

解决方案

First in 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

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:

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();
});

Second you need to close your tbody tag inside the table

这篇关于在Table中显示ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！