修改结果表以使用AJAX - Modifying Results Table to use AJAX

我有一个PHP网站，允许用户搜索图书馆目录，然后选择/添加书籍到购物车。这一切都很好，但我们希望在搜索结果表中实现AJAX，这样它就不会点击运行另一个php脚本的链接将所选记录添加到他们的购物车中，而是在同一页面内内联。这将删除当他们"选择"一条记录时刷新的搜索结果页面，它会弹回页面顶部（如果你在页面底部，那就很烦人）。

我发现了一个用链接实现AJAX的类似例子——这是我第一次使用AJAX——但我被卡住了，因为当用户点击链接时什么都不会发生。

这是我的脚本：

function selectRecord() {
   // 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("selectRecord").innerHTML=xmlhttp.responseText;
      }
   }
   // Open an asynchronous POST connection and send request
   xmlhttp.open("POST", "selectRecord.php", true);
   return false;  // Do not follow hyperlink
}

这是带有链接的表格单元格：

<td class="hidden-narrow" id="selectRecord">
                <?php
                if (in_array($bookID, $_SESSION['selectedBooks'])) {
                    echo "Selected";
                } else {
                echo '<a href="select" onclick="return selectRecord()" class="center">Select</a>';
                }
                ?>
                </td>

如果不清楚我想要的结果是表单元格中的一个链接（"Select"），当用户单击该链接时，它会执行selectRecord.php脚本，该脚本将返回"Selected"或错误消息（如果有错误）。目前，当用户单击"选择"链接时，不会发生任何事情。

我还需要研究如何将$bookIDPHP变量传递给AJAX脚本，以便selectRecord.PHP知道要添加到购物车中的图书ID。

您可以在selectRecord（）调用中添加一个参数，如下所示：

echo '<a href="select" onclick="return selectRecord('.$bookID.')" class="center">Select</a>';

然后您的selectRecord功能应该如下所示：

function selectRecord(id) {
   // 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("selectRecord").innerHTML="Selected";
      }
   }
   // Open an asynchronous POST connection and send request
   xmlhttp.open("POST", "selectRecord.php", true);
   xmlhttp.send("id="+id);
   return false;  // Do not follow hyperlink
}

只要文档中只有一个id为selectRecord的元素，这种方法就很有效。您总是可以通过简单地添加BookId编号作为后缀来修改任何链接的id。请注意，您的代码不起作用，因为它缺少对xmlHttpRequest对象的.open调用，该调用实际执行请求。