如何使用Javascript来“存储”和“调用”数据？

Question

我正在为假商店网站制作“目录”页面，当我单击页面上显示的缩略图之一时，Java脚本叠加层旨在显示产品的所有信息（例如较大的图像“ photo1'）和该缩略图（产品在SQL数据库中）。

尽管这样做确实可以按预期拉上叠加层，但它不仅得到了一个相关的“ photo1”，而是从表格中获取了所有叠加层。

我从老师那里得到了帮助，但她什至没有帮助，但是从我的收集中，我需要一种方法来存储选择的缩略图，以便我可以弄清楚要叠加的信息。

主要：

<div id="overlay">
    <div>
    <?php
        include 'includes/connection.php';

        try {
            $sql = 'SELECT * FROM item;';
            $resultSet = $pdo->query($sql);
        } // end try
        catch (PDOException $e) {
            echo 'Error fetching items: ' . $e->getMessage();
            exit();
        } // end catch

        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>';
        }
    ?>

    <p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
    </div>
</div>

<div id="MainHolder">
    <div id="Headerbar">
        <?php
            include 'includes/login.php';
        ?>
        <div class="ContentBody">
            <div class="Content">
                <article> 
                    <h2>Store</h2>
                    <?php
                        include 'includes/connection.php';
                        try
                        {
                            $sql = 'SELECT * FROM item;';
                            $resultSet = $pdo->query($sql);
                        } // end try
                        catch (PDOException $e)
                        {
                            echo 'Error fetching items: ' . $e->getMessage();
                            exit();
                        } // end catch
                    ?>
                    <!-- open table -->

                    <article>
                    <?php
                        // read result set and populate table 
                        foreach ($resultSet as $row)
                        {
                            // put each rows's elements into variables
                            $itemName = $row['itemName'];
                            $thumbNail = $row['thumbNail'];
                            $qtyOnHand = $row['qtyOnHand'];
                            // test for out of stock condition
                            // if no stock, display out of stock image else display add to cart image 
                            if ($qtyOnHand <= 0) {
                                echo '<td><img  src="images/outOfStock.png" border="3" class="floatingImage" height="80" width="80" alt="" title=""></td>';
                            } else {
                                echo '<td><img class="floatingImage" border="3" src="' .$thumbNail .'" width="80" height="80" alt="' .$itemName .'" title="' .$itemName .'" onclick="overlay()" ></td>';
                            }
                        } // end foreach
                        // close table 
                        echo '</article>';
                    ?>
                </article>
             </div>
             <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>          
    </div>
</div>

使用Javascript：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

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

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

Answer 1

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

叠加功能：

function overlay() {

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

现在我们需要向服务器设置一个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();
  }
}

现在，我们需要编辑overlay函数来调用ajaxRequest函数：

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
?>

Answer 2

如果要绝对在客户端存储数据，则可以将html5的本地存储功能与嵌入式sql lite数据库一起使用，以使用Javascript存储和检索信息。

Answer 3

首次使用此循环从数据库获取产品时：

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>';
}

当用户单击叠加层的图像时，是否要显示所有这些属性？ 如果是这样，只需将值存储在实际的<img>标记中：

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

然后，您可以使用Javascript访问数据并在叠加层中显示。

Answer 4

我尝试了解您的问题，并使用jQuery解决了它。

首先，您必须加载jQuery lib

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

并在叠加中的每个生产信息中添加display：none样式（默认为隐藏）。

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

删除缩略图内联onClick事件触发器

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

添加此单击事件处理程序，以便jQuery可以显示用户单击的生产信息。

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

希望这对您有帮助。