Question

我有一个像这样的数据库表 -

    -----------------------------------|
    ID         |    Name  |   Status   |
    -----------------------------------|
    101             John        0      |
                                       |
    102             Robert      1      |
                                       |
    103             David       0      |
    -----------------------------------|

通过创建这个数据库，我创建了一个html表（如下所示），其中每一行都有一个按钮，用于更改其在表中以及后端数据库中的当前状态。即0变为1，1变为0。

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Status</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>101</td>
    <td> John </td>
    <td> 0 </td>
    <td><button>Change Status</button> </td>
  </tr>
  <tr>
    <td>102</td>
    <td> Robert </td>
    <td> 1 </td>
    <td><button>Change Status</button> </td>
  </tr>
  <tr>
    <td>103</td>
    <td> David </td>
    <td> 0 </td>
    <td><button>Change Status</button></td>
  </tr>
</table>

这应该在不刷新页面的情况下完成。所以我想我应该使用ID和该ID的状态对服务器进行AJAX调用。但我不明白该怎么做。

Answer 1

首先在button标记上添加数据属性并在其值中输出ID，然后为当前状态创建另一个数据属性，以便按钮标记看起来像这样：

<button data-id="5" data-status="0">Change Status</button>

然后使用jQuery的ajax方法向服务器发送Ajax调用，如下所示：

$("button").click(function(e){
    e.preventDefault();
    data = {row_id: $(this).data('id'), current_status: $(this).data('status')};
    $.ajax({
        type : "post",
        data: data,
        url: "URL_TO_SERVER_FILE_WHICH_WILL_HANDLE DATA",
        success: function(result){
            // show message here and also change current status on data 
            // attribute of button and in the status column of table

        }
    });
});

使用AJAX调用更改HTML表的特定行数据以及数据库

1 个答案: