Question

我有一个结果表，允许用户在结帐阶段从所选书籍列表中删除图书馆书籍。我已经实现了一个简单的AJAX技术，这样当用户单击列表中书籍旁边的“删除”按钮时，它就会将其从页面中删除而无需重新加载页面 - 这一切都运行良好。

我现在还需要更新处理分页的页面上的另一个元素，以显示他们拥有的书籍数量。在列表的顶部有这个分页摘要：

<div class="recordlist_nav">Displaying records 1 - 10 of 10 records selected</div>

除了从列表中删除书籍之外，我还需要更新它，例如，如果他们删除了一本书，它应该更改为：

<div class="recordlist_nav">Displaying records 1 - 9 of 9 records selected</div>

我可以生成更新的字符串，但不确定如何让我的AJAX脚本同时更新多个元素。这是我的剧本：

<script type="text/javascript">
function deleteRecord(recid,articleID) {
   // Allocate an XMLHttpRequest object
   if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari
      var xmlhttp=new XMLHttpRequest();
   } else {
      // IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   // Set up the readyState change event handler
   xmlhttp.onreadystatechange = function() {
      if ((this.readyState == 4) && (this.status == 200)) {
         document.getElementById("selectedRecord" + recid).innerHTML=xmlhttp.responseText;
      }
   }
   // Open an asynchronous POST connection and send request
   xmlhttp.open("POST", "delete_record.php", true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("recid="+recid+"&articleID="+articleID);
   return false;  // Do not follow hyperlink
}
</script>

目前，delete_record.php在删除所选记录时只回显一个空字符串：

$result = '';
echo $result ;

我将更新的分页标头存储在$ navigation变量中。我现在需要将其传递回脚本并让该脚本用$ navigation变量的内容替换它的内容。

Answer 1

尼克+1。使用jQuery，它会让你的生活变得更加简单。

<script><!-- type="text/javascript" not needed -->
function deleteRecord(recid,articleID,thisPage,allPages) {
    $.ajax({
        url: 'delete_record.php',
        type: 'POST',
        data: JSON.stringify({recid:recid,articleID:articleID}),
        success: function () {
            // It worked
            $(".recordlist_nav").text("Displaying records 1 - "+thisPage+" of "+allPages+" records selected");
        }
    });
    return false;
}
</script>

AJAX脚本 - 现在需要更新多个

1 个答案: