如何使用jQuery Ajax更新表格行？

Question

我有一個表格，其中包含兩個用戶可以選擇批准或拒絕的按鈕。我正在使用jQuery .post（）方法來更新一個MySQL數據庫與這個信息，它都可以正常工作。目前PHP只是迴應文本回應。

現在我想使用ajax刷新按鈕被點擊後的新信息表中的狀態字段。我不確定最好的方式去做這件事。應該從服務器端使用jQuery .get（）獲取表，還是隻需更新狀態字段？

表

**Username Status    Change Status** 
Anderson no   (decline button) (Add button) 
julian  yes   (decline button) (Add button) 

jQuery的

$(document).ready(function() { 
$("#myForm2").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 


    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_add"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

$("#myForm1").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_remove"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 
     }); 
    }); 

}); 

HTML表格和形式

echo "<tr> 
<td> 
<a href=\"profile.php?user_id=".$collab_userid." \" 
<span class=\"label label-default\" id=\"tag\">".$collab_username."</span></a> 
</td> 
<td> 
".$status." 
</td> 

<td> 
<form id=\"myForm1\" class=\"myForm1\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_remove\" class=\"btn_remove\" name= \"btn_remove\">Remove</button> 

</form> 
</td> 
<td> 
<form id=\"myForm2\" class=\"myForm2\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_add\" class=\"btn_add\" name= \"btn_add\">Add</button> 

</form> 
</td> 

</tr>"; 

} 
"</tbody> 
</table>"; 

在PHP

if ($btn=="btn_add") { 
$status="yes"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 



     echo "<p>user approved</p>"; 


} 
} 
    elseif ($btn=="btn_remove"){ 

$status="no"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 

    echo "<h1>user declined</h1>"; 


} 
} 

Answer 1

設置ID爲您的狀態字段的表像這樣：

<td id='status_1'> 
".$status." 
</td> 

當你的PHP代碼輸入反應就像你說的一些文字，只需更改狀態字段的html值是這樣的：

$.post(url, formdata, 
    function(data) { 
     $("#status_1").html('Yes'); //Response 
    }); 

}）;

Answer 2

我建議從服務器響應更新查詢返回新狀態，並使用它來更新$ .post回調中前端的狀態。

做到這一點

最快的方法 - 就是狀態添加到回覆的DOM元素：

echo "<answer><h1>user declined</h1></answer><status>$status</status>; 

和$。員額回調接收到的數據的訪問是這樣的：

$("#results").html($(data).find('answer').html()); //Response 
$("#whatever").html($(data).find('status').html()); //Status 

你應該標記td與狀態由smth訪問它