Question

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

以下是包含<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/

Answer 2

请参阅此问题：Getting the ID of the element that fired an event

你想要的是获取当前点击的元素的父母＆＃39; li＆＃39;然后在其中找到div。如下所示：

$(function() {
  $(".update").click(function() {
    var data = "List updated";
    var parentlistElement = $(this).parent(); // points to li

    $.ajax({
      method: "POST",
      url: "update_list.php"
      data: data,
      cache: false,
      success: function(response) {
        // update the specific list item
        parentListElement.find('div').text(response);
      }
    })
  })
})

按下特定列表的按钮后，使用ajax更新特定列表<li>

2 个答案: