javascript - ajax 调用后更新动态生成的列表项(使用 PHP 生成)

Question

以下 HTML 代码使用 PHP 中的 while 循环进行echoed，该循环在从数据库获取数据后添加一个列表项。

PHP:

echo '
<li>

  <div class="collapsible-header">

    <div class = "left">
      <div class = "issueStatusIcon" style = "background-color:'.$smallCircleColor.';">'.$smallMsg.'</div>
      <span class = "issueTitle" style = "font-family: robotoBold">'.$issueTitle.'</span>
    </div>

    <div class = "issueButtonsGroup">
      <form id = "archiveIssueForm'.$i.'" issue-name = "'.$issueTitle.'" action = "archiveIssue.php">
        <input type = "hidden" value = "'.$issueID.'" name = "issueID"/>
      </form>
      <a class = "right archiveIconButton" onclick = "ajaxIssueArchive('.$i.')" href = "#">
          <i class="material-icons black-text issueOptions archiveIcon">archive</i>
      </a>
      <a class = "right"><i class="material-icons black-text issueOptions">edit</i></a>
    </div>

  </div>                          

</li>                  
';

这是生成的列表的预览图像:

请注意光标位于用于存档列表项的存档按钮上。该按钮的class是archiveIconButton(您可以在上面的代码中找到它)。单击按钮时，archiveIssueForm 通过 AJAX 提交(每个表单都有一个附加到其 id 的唯一标识符变量 $i)。

以下是 JQuery AJAX 代码:

JQuery:

<script>
  function ajaxIssueArchive($num){

    $.ajax({
      type: "post",
      url: "archiveIssue.php",
      data: $('#archiveIssueForm' + $num).serialize(),

      success: function(data){

        $fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
        $toastText = $fetchIssueName + " has been archived";
        Materialize.toast($toastText, 3000);
        $('#archiveIssueForm' + $num).html(data);
      }
    });

  }
</script>

归档任何列表项后，它将从数据库中删除。我想更新包含这些列表项的 ul 元素，以便在 AJAX 表单提交后不会显示被删除的列表项。

假设ul的id为issueListUL。

我当前得到的是 li 项中显示的 html 页面的完整代码。我肯定做错了什么，任何帮助将不胜感激!

归档列表项后:

Answer 1

我能够通过以下方式解决这个问题，问题中的 JQuery 脚本应该这样更改:

JQuery:

<script>
  function ajaxIssueArchive($num){

    $.ajax({
      type: "post",
      url: "archiveIssue.php",
      data: $('#archiveIssueForm' + $num).serialize(),

      success: function(data){

        //assigning the updated ul's html to a variable
        $afterIssueArchival = $(data).find("#issueListContainer").html();

        //toast
        $fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
        $toastText = $fetchIssueName + " has been archived";
        Materialize.toast($toastText, 3000);

        //updation of ul's html, ID of the ul which contains all the list items is assumed to be 'listContainer'

        $("#issueListContainer").html($afterIssueArchival);
      }
    });

  }
</script>

更新元素的 html 时，只需从 ajax 代码中的 data 属性中提取元素更新后的 html 代码 (如上面的代码所示) 并用它更新现有元素的 html!

希望能帮到和我有同样问题的人! :D