0

我试图找出使用 PHP 在（有点）特定场景下跨两个页面（页面 A 到页面 B）传递数据的最佳方法：

页面 A：带有标题的图片库。要创建此页面，需要在 PHP 文件中对包含图像 ID、图像位置和图像标题的图像表进行数据库调用。它获取表中存在的所有图像，并使用 for 循环将它们全部回显到屏幕上。它在指向页面 B 的每个图像的锚标记上创建一个 href。

B 页：图片的大图。当用户单击页面 A 上的图像时，它会将他们带到具有更大图像视图的新页面。

为了实现这一点，我目前在每个包含页面 A 中图像的锚点上放置一个 href，并带有一个包含图像 id 的参数。然后，在页面 B 上，我使用传入的 id 进行另一个数据库调用，以再次获取图像标题、位置等。

当我已经在上一页检索到所有需要的数据时，再次调用数据库对我来说似乎是错误的。在我看来，只有三个体面的选择对我来说似乎都很糟糕：

  • 多个数据库查询- 如上所述。似乎效率低下。

  • GET - 不仅仅是在页面 A 的 href 中包含图像 id，而是在 href 中包含所有需要的参数。请注意，我实际上不止三个参数，可能需要传递超过 15 个值。拥有如此庞大的 url 并在 url 中传递诸如图像位置之类的东西似乎是错误的。

  • POST - 在页面上为每个图像创建一个表单，方法为POST. 在表单中为需要传递表单的每个参数放置一个隐藏Page A字段Page B。再一次，这对我来说似乎是一个非常糟糕的主意，拥有大量不必要的标记并且会变得非常混乱。

有没有人对这些方法有任何意见，或者有更好的主意？随着我的开发越来越多，我发现自己质疑效率，以及为什么要进行如此多的数据库调用一遍又一遍地做同样的事情是没有意义的。我希望能够对一张图像进行一次数据库调用，然后再也不必为该会话再次调用。

（请注意，这JavaScript / jQuery是我的一个选项）

谢谢！

4

3 回答 3

1

Web 的现实是，您每次都需要发出 HTTP 请求以从服务器获取一些数据。如果您重新加载页面，浏览器将再次发出 HTTP 请求以再次获取该数据。HTML5对上述问题有很多解决方案......

  1. Web 存储 - 在客户端将值存储为键值对
  2. Web SQL 数据库 - 与 SQL 相同
  3. IndexedDB - 介于 Web 存储和 Web SQL 数据库之间

您需要从图像中创建一个 base64 字符串并将该字符串存储在 Web Storage 或 WebSQL 数据库中。您可以在 javascript 文件中将图像代码编写为 base64，然后使用 HTML5 API 将字符串存储在数据库中。

看看这个页面——http: //www.html5rocks.com/en/features/storage

于 2013-09-27T07:24:15.700 回答
1

我只会做你正在做的事情，但要使用一个函数。该功能将具有

SELECT * FROM table WHERE id = $imageid

传递您想要的图像的 ID，如果没有值，$imageid则显示全部。这样，在页面 A 上，您可以使用它来获取图像，然后只需使用带有 ID 的 POST 或 GET 即可运行相同的函数来获取 ID 的结果。

我会说那样做并不是很麻烦，但我还是会这样做。

总体上做这样的事情：

function getImage ($imageid) {

  if($imageid == ""){
    $result = mysqli_query($con,"SELECT * FROM table");
    return $result;

  } else {
    $result = mysqli_query($con,"SELECT * FROM table WHERE id = $imageid");
    return $result;

  }
}
于 2013-09-27T07:05:54.123 回答
0

使用 jquery，您不必转到下一页。您可以简单地执行以下操作：

$('div#largeImageDisplay').hide(); // Div to display large image on. You can style however you want

$("a.linkClass").on("click", function(e) {
    sImagePath = $(this).children("img").attr("src"); // use replace function to change path to the one you want 
    sImageTitle = $(this).attr("title");

    $('div#largeImageDisplay').empty();
    $('div#largeImageDisplay').html("<h3>"+sImageTitle+"</h3><img src='"+sImagePath+"'/>");

    e.preventDefault();

});
于 2013-09-27T07:19:49.793 回答