首页 文章

如何使用jquery Ajax更新表行?

提问于
浏览
1

我有一个包含两个按钮的表,用户可以选择批准或拒绝 . 我使用jQuery .post()方法用这些信息更新mysql数据库,一切正常 . 目前php回应了文本响应 .

现在,我希望在单击按钮后使用ajax刷新表中的状态字段 . 我不确定最好的办法 . 是应该从服务器端使用jQuery .get()获取表还是只更新状态字段?

table

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


}
}

2 回答

  • 1

    set an id for your status field in table like this :

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

    当你说一些文本时你得到的PHP代码重新启动你可以改变状态字段html值,如下所示:

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

    });

  • 1

    我建议从服务器传回新状态以响应更新查询,并使用它来更新$ .post回调中前端的状态 .

    最快的方法 - 将响应状态添加为dom元素:

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

    并在$ .post回调中访问收到的数据,如下所示:

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

    你应该用smth标记td来访问它

相关问题