如何使用jQUery Ajax更新表行? [英] How to update a table row with jQUery Ajax?

问题描述

我有一个包含两个按钮的表，用户可以在其中选择批准还是拒绝.我正在使用jQuery .post()方法使用此信息更新mysql数据库，并且一切正常.目前php只是回显文本响应.

I have a table that contains two buttons where the user can choose to either approve or decline. I am using jQuery .post() method to update a mysql database with this information and it all works fine. Currently php just echoes back a text response.

现在，我想在单击按钮后使用Ajax使用此新信息刷新表中的状态字段.我不确定执行此操作的最佳方法.应该从服务器端使用jQuery .get()获取表，还是可以仅更新状态字段?

Now I want to use ajax to refresh the status field in the table with this new information after the button has been clicked. I'm not sure of the best way to go about this. Should the table be fetched with jQuery .get() from server side or can I just update the status field?

表格

**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>";


}
}

推荐答案

为表中的状态字段设置ID，如下所示:

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

当您说出一些文字而得到php代码响应时，您可以像这样更改状态字段html值:

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

});

这篇关于如何使用jQUery Ajax更新表行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！