Question

我有一个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>

如果不清楚我所追求的结果是表格单元格中的链接（“选择”） - 当用户单击此链接时，它会执行selectRecord.php脚本，该脚本将回显“已选择”或错误消息，如果有错误。目前，当用户点击“选择”链接时，没有任何反应。

我还需要弄清楚如何将$ bookID PHP变量传递给AJAX脚本，以便selectRecord.php知道要添加到购物车的书籍ID。

Answer 1

您可以在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调用。

修改结果表以使用AJAX

1 个答案: