使用 php jquery ajax 从 mysql 获取图像并将它们显示在 DIV 内的 html 页面中

Posted 2023-02-24

【中文标题】使用 php jquery ajax 从 mysql 获取图像并将它们显示在 DIV 内的 html 页面中

【英文标题】：get images from mysql with php jquery ajax and display them in html page inside DIVs

【发布时间】：2012-01-25 20:49:06

【问题描述】：

在深入搜索我的问题后，我正在编辑我的问题，基本上我的网站是一个时装展示网站，它展示鞋布和包包等当用户单击索引页面上的缩略图或转到菜单并单击鞋子链接时，javascript会在新选项卡中打开较大的图像，但现在我正在切换到php，我所做的如下

我创建了一个 mysql 数据库，其中包含图像的路径，例如用于缩略图的 images/zara/thumbnails/shoes 和用于较大图像的 images/zara/shoes

当用户点击 ex(shoes) 的链接时，jquery 会像这样抓取链接文本

   $(document).ready(function() 
    $('ul.sub_menu a').click(function() 
        var txt = $(this).text();  
            $.ajax(
            type: 'POST',
            url: 'thegamer.php',
            data: 'txt'
            );
    );
);

现在进一步将它传递给 php 文件，我现在面临一个问题，我现在需要的是

php 将如何根据数据库中的 var txt 进行搜索以检索鞋子的缩略图打开一个新选项卡说（shoes.html）并在 div 中显示所有可用的鞋子缩略图

【问题讨论】：

应该在新窗口中打开大图

@refhat 我编辑了我的问题请检查一下

【参考方案1】：

这是应该工作的 jquery 代码：

<script>
$(function () 

  $(document).on('click', 'div.prodcls img', function (e) 
    e.preventDefault();
    window.open($(this).attr('src').replace('/thumbnails', ''), '');
  );

);
</script>

还有一些 css 可以很好地衡量：

<style>
div.prodcls img:hover 
  cursor: pointer;

</style>

这是一个有效的小提琴：http://jsfiddle.net/DenGp/

【讨论】：

注意，我希望很明显——在这段代码中，我假设“新标签”是指一个新的浏览器标签（现在大多数浏览器在看到一个窗口时都会默认这样做。打开）。如果你的意思是别的，可以很容易地修改它来做任何事情（例如，弹出一个灯箱）。

我的 jquery 不工作，因为 javascript 工作我已经在脚本中附加了库，但没有工作是什么问题

你能提供一个链接吗？究竟是什么不工作？您是否收到 javascript 错误？

如果我以一个 div 为目标来打开图像，那么代码是什么

查看 DmitryB 提供的灯箱答案。

【参考方案2】：

CSS：

#imagePopup float:left; z-index:10; position: absolute; 

添加一些定位

HTML:

<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" />
</div>

<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" />
</div>

<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" />
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>

JS：

$('.prodcls').click(function()
   var src = $(this).attr('src').replace('/thumbnail', '');
    $("#imagePopup").html("<img src='"+src+"'/>")
    $("#imagePopup").toggle();
);

更新答案：

HTML：（给每张图片一个链接）：

<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>

showImage.php:

$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;

【讨论】：

这个也可以，不过是给画廊用的

这是我的代码，但它仍在打开缩略图

使用我的解决方案，您不需要<a href="">，只需使用我上面提供的代码即可。 虽然很奇怪，当您单击该链接时会看到缩略图，但那是另一回事。

你能解释一下.attr('').replace('/thumbnail','')

.attr('').replace('/thumbnail','') 将 SRC 中的“/thumbnail”部分替换为“”，因此它实际上删除了该部分。 .html(src) 将选定元素的 HTML 设置为该源。实际上应该是.html("<img src='"+src+"'/>")。另请参阅：api.jquery.com/html 和 w3schools.com/jsref/jsref_replace.asp

【参考方案3】：

您可以在没有 jQuery 的情况下在新的浏览器选项卡中打开实际图像：

例如：

<div id="prodoneid" class="prodcls">
  <a href='images/zara1.png' target='_blank'>
    <img src="images/thumbnail/zara/1.png" />
  </a>
</div>

【讨论】：

你的代码正在新窗口中打开缩略图，我想要 images/zara/1.png 中的大缩略图

请在<a href='images/zara/1.png' target='_blank'>的href中使用更大的图片路径

好的，但是如果我想在特定页面中指向一个 div 就像在这个页面 fprodone.html 中的一个

你可以使用jQuery的$.ajax()函数来实现这个吗？ 例如： ***.com/questions/3326614/…

【参考方案4】：

也许您真正需要的是灯箱？看看这个库：http://www.huddletogether.com/projects/lightbox2/

【讨论】：

是的，这正在解决我的问题，但我希望在新窗口中打开更大的图像如何解决

你确定这就是你想要的吗？

【参考方案5】：

您的 AJAX 代码中有错误（您放弃包含实际的 var：

$(document).ready(function() 
    $('ul.sub_menu a').click(function() 
        var txt = $(this).text();  
            $.ajax(
            type: 'POST',
            url: 'thegamer.php',
            data: 'txt':txt  //added :txt here
            );
    );
);

现在在 PHP 中：

$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.

【讨论】：

data: 'txt':txt //add :txt here with ur this code ur making the link catch static 我有很多东西，比如牛仔裤 裤子 鞋子 衬衫 包 帽子 等等我想让它动态化，无论点击什么链接，jquery 都会抓取文本并将其转发到你的代码中的 php 我应该提到像这样的代码'txt'：shoes