javascript - 按下特定列表的按钮后使用ajax更新特定列表

Question

如何更新特定列表 <li>在 success 方法之后使用 ajax。

这是简单的 <li>结构 <div>包含文字:

<ul>
  <li>
    <div>List1</div>
    <input class="update" type="submit" name="update" value="Update">
  </li>
  <li>
    <div>List2</div>
    <input class="update" type="submit" name="update" value="Update">
  </li>
</ul>

这是一个使用 ajax 的简单 JavaScript:

$(function() {
  $(".update").click(function() {
    var data = "List updated";

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function() {
        // update the specific list
      }
    })
  })
})

假设数据是一个字符串，发送到php文件，更新数据库，然后在单击特定列表的更新按钮后发回字符串以更新特定列表。假设第一个列表将被更新。点击特定列表的更新按钮后如何更新特定列表？

Answer 1

由于您使用的是 jQuery，因此它是 .siblings()选择器。

$(function() {
  $(".update").click(function() {
    let data = "List updated";
    let sibling = $(this).siblings();

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function() {
        sibling.text("Whatever");
      }
    })
  })
})

https://jsfiddle.net/309q5852/