Php 我如何使用Javascript来；商店「；及；调用；数据？

我正在为一个假商店网站制作一个“目录”页面，当我单击页面上显示的一个缩略图时，java脚本覆盖将显示该产品的所有信息（如较大的图像“photo1”）以及该缩略图（产品位于SQL数据库中）

虽然这确实像预期的那样拉起了一个覆盖，但它不仅得到了一个相关的“photo1”，而是从表中得到了所有的覆盖

我从一位老师那里得到了帮助，但她甚至帮不上忙，但从我收集的信息来看，我需要一种方法来存储所选择的缩略图，这样我就可以澄清要为叠加提取哪些信息

主要内容：

覆盖和目录位于同一文件中。 我仍在学习中，因此，对于任何混乱的格式/代码，我深表歉意

---

编辑：我已经合并了一些代码，这几乎显示了我的整个商店页面，而不是标题，等等…

您需要编辑覆盖函数以将itemName发送到服务器，这将告诉您的服务器用户单击了哪个项目

覆盖功能：

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
}

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
    ajaxRequest(item); //send the item name to server
}

现在我们需要向服务器设置一个ajax请求

function ajaxRequest(item) {
  if (window.XMLHttpRequest){
    var xmlhttp= new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status == 200){//show the overlay after we recieve a response from the server
        el = document.getElementById("overlay");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        el.innerHtml = ''; //remove previous response
        el.innerHTML=xmlhttp.responseText; //insert the response in your overlay
      }
    }
    xmlhttp.open("GET","overlay.php?item="+ encodeURIComponent(item),true);
    xmlhttp.send();
  }
}

现在我们需要编辑覆盖函数来调用ajaxRequest函数：

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
}

function overlay() {

    var item = this.getAttribute("title");//this gets the name of item that was clicked
    ajaxRequest(item); //send the item name to server
}

完成此操作后，PHP将在服务器上收到一个变量。创建一个名为overlay.php的新文件，并插入以下代码。将此文件保存在与Store.php文件相同的目录中

overlay.php：

<?php
if (isset($_GET['item'])) {//check if you received the name
    $itemName = $_GET['item'];

   //query database for the itemName

                        try
                        {
                            $sql = 'SELECT * FROM item WHERE itemName ='.$itemName.';';//just select data with the matching item name.
                            $resultSet = $pdo->query($sql);
                        } // end try


                        catch (PDOException $e)
                        {
                            echo 'Error fetching items: ' . $e->getMessage();
                            exit();
                        } // end catch
    //fetch the data
    foreach ($resultSet as $row) {
        // put each rows's elements into variables
        $itemName = $row['itemName'];
        $unitPrice = $row['unitPrice'];
        $qtyOnHand = $row['qtyOnHand'];
        $thumbNail = $row['thumbNail'];
        $photo1 = $row['photo1'];
    echo '<td><img  src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
    }//end foreach

}//end if
?>

---

如果您想在客户端绝对存储数据，可以使用html5的本地存储功能和嵌入式sql lite数据库，使用Javascript存储和检索信息
 首次使用此循环从DB获取产品时：

foreach ($resultSet as $row) {
    // put each rows's elements into variables
    $itemName = $row['itemName'];
    $unitPrice = $row['unitPrice'];
    $qtyOnHand = $row['qtyOnHand'];
    $thumbNail = $row['thumbNail'];
    $photo1 = $row['photo1'];
    echo '<td><img  src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
}

foreach（$resultSet作为$row）{
//将每行的元素放入变量中
$itemName=$row['itemName']；
$unitPrice=$row['unitPrice']；
$qtyOnHand=$row['qtyOnHand']；
$thumbNail=$row['thumbNail']；
$photo1=$row['photo1']；
回声'；
}

当用户单击用于覆盖的图像时，这些是您想要显示的所有属性吗？如果是这样，只需将值存储在实际的
”；

然后，您可以使用Javascript访问数据并显示在覆盖中。
我试图理解您的问题，并使用jQuery解决它

首先，必须加载jQuery库

    echo '<td><img src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" data-unit-price="$unitPrice" data-qty="$qtyOnhand"></td>';

希望这对您有所帮助。
我已经将该代码按原样放入java中，它不会破坏它，但不会修复它。我是否必须在某个地方加入我自己的价值观？我以前没有使用过任何类似XML的东西，所以我有点盲目。我把代码放进去了，但是现在当我点击缩略图时，没有弹出任何内容，没有覆盖。我不太相信我把代码放在了正确的位置，所以我也尝试了其他部分。没有avial。@ComradeRak你把ajaxRequest函数放在哪里了？@ComradeRak你有overlay.php文件吗？另外，您能告诉我哪些文件与此网页位于同一目录下吗？该函数位于覆盖函数下的脚本文件中，我假设我的PHP放错了位置，但我一直在回溯，直到覆盖再次工作，并且在我删除覆盖函数中的两行原始行后停止。请详细描述您的答案，或者使用
添加注释
部分。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

echo '<td><img src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" style="display:none" ></td>';

echo '<td><img class="floatingImage" border="3" src="' .$thumbNail .'" width="80" height="80" alt="' .$itemName .'" title="' .$itemName.'"'></td>';

$(".floatingImage").click(function(){
    var itemName = $(this).attr('alt');
    $('#overlay img').hide();
    $('#overlay img[alt="'+itemName+'"]').show();
    overlay();
});