在 django 中使用 ajax 更新表行中的单个 <td> 值

Question

我正在尝试在不刷新页面的情况下阻止/取消阻止用户。如果status=1，会显示Block选项，如果status=0，会显示Unblock选项

调用该函数后，views.py中的状态会变为0或1 该功能工作正常，但刷新页面后显示

如何在不刷新页面的情况下显示该值

<table id='usersTable' class="table table-bordered">
<thead>
    <tr>
        <th>S.No.</th>
        <th>Name</th>
        <th>Email</th>
        <th>Block/Unblock</th>
    </tr>
</thead>
<tbody>
    {% for userid, name, email, status in comb_lis %}
    <tr id='usr-{{name}}'>
        <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}">
        <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}">
        <td>{{forloop.counter}}</td>
        <td>{{name}}</td>
        <td>{{email}}</td>
        <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value)">
            {% if status == "1" %}
                Block
            {% else %}
                Unblock
            {% endif %}
        </a></td>
    </tr>
    {% endfor %}
</tbody>

这是ajax函数

function restrictUser(userid, name) {
$.ajax({
    url: '/restrict-user-ajax/'+userid,
    dataType: 'json',
    success: function (data) {
        if (data.status) {
            alert("User Blocked!");
        }
    }
});

}

感谢任何帮助

Answer 1

在您的restrictUser 函数中，您也可以传递this，它将引用当前单击的元素并使用.text() 获取a 标签内的当前文本。然后，在ajax 的成功函数下检查data.status 是否为真，具体取决于此更改特定a 标记的文本block 或unblock。

演示代码：

var data = {
  "status": true
} //demo json

function restrictUser(userid, name, el) {
  var els = $.trim($(el).text()); //trim any whitespace
  console.log(els)
  /*$.ajax({
    url: '/restrict-user-ajax/' + userid,
    dataType: 'json',
    success: function(data) {*/
  //check if status is true
  if (data.status) {
    //check previous text was block/unblock
    if (els == "Block") {
      //change text
      $(el).text("Unblock")
    } else {
      $(el).text("Block")
    }
  }
  /*}
  });*/


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='usersTable' class="table table-bordered">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Email</th>
      <th>Block/Unblock</th>
    </tr>
  </thead>
  <tbody>

    <tr id='usr-{{name}}'>
      <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}">
      <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}">
      <td>1</td>
      <td>Something</td>
      <td>s@gmail.com</td>
      <!--add this to function as paremter-->
      <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value,this)">Unblock</a></td>
    </tr>
    <tr id='usr-{{name}}'>
      <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}">
      <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}">
      <td>2</td>
      <td>something2</td>
      <td>y@gmailc.com</td>
      <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value ,this)"> Block </a></td>
    </tr>
    <tr id='usr-{{name}}'>
      <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}">
      <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}">
      <td>3</td>
      <td>sss</td>
      <td>g@gmail.cm</td>
      <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value,this)">Unblock
        </a></td>
    </tr>

  </tbody>
</table>