Question

如何将我的jquery变量输入到php变量中，我已经在其中创建了一个带有jquery的php文档，在单击css将更改的图像后，您将在其旁边看到更大的图像。我需要在php变量中拥有大图像的图像源，以从数据库中获取有关图像的信息。

php文件中的代码：

<div id="box-content">
     <?php
         $con=mysqli_connect("localhost","root","root","database");
         // Check connection
         if (mysqli_connect_errno()) {
             echo "Failed to connect to MySQL: " . mysqli_connect_error();
         }

         $result = mysqli_query($con,"SELECT * FROM image");
         while($row = mysqli_fetch_array($result)) {
             echo "<img src='". $row['url'] ."' class='media-image' />";
         }
         mysqli_close($con);
     ?>
</div>
<div id="image-info">
     <div id="image">
            <img src="" id="bigimage"/>
     </div>

js文件中的代码：

$(function () {
    "use strict";
    $('.media-image').click(function () {
        $(this).toggleClass('media-image-selected');
    });
    $('.media-image').click(function () {
        var src = $(this).attr('src');
        $('#bigimage').attr('src', src);
    });
});

Answer 1

如果我了解您的问题是您希望动态显示数据库中图像对象的信息。

在这种情况下，我认为你有两个选择：

第一个选项

在构建页面时的服务器端代码中，您可以从数据库中查询有关图像的所有可能信息。您应该将这些元数据保存在data HTML attributes中。在java脚本的客户端代码中，您可以读取并显示这些元数据值。要读取数据属性，可以使用.data（）jQuery函数在这种情况下，由于大查询，您的页面加载时间将增加，但客户端不必等待更多信息来加载信息，因为每个数据都在客户端。

第二个选项

你可以用AJAX加载来做到这一点。你需要PHP脚本来构建布局。您必须为图像添加某种标识，即：来自数据库的ID，无关紧要，您将通过此值搜索图像。为了放置这些ID，我建议您使用前面提到的数据属性。之后，您将需要一个PHP接口，它将从数据库中进行选择。此脚本应从GET参数读取图像ID，并根据该脚本选择有关该图像的信息。将数据放在PHP数组中，然后选择将PHP数组转换为JSON数组并写出。重要提示：除JSON数组外，此脚本不得写出任何内容。在此接口脚本中，您应该使用以下代码将标头更改为json数据类型：

header('Content-type: application/json');

最后，您必须在布局上创建一个客户端脚本，该脚本从单击的图像加载ID并将AJAX加载调用到接口php。对于AJAX调用，我建议使用jQuery ajax函数： http://api.jquery.com/jquery.ajax/

因此，在这种情况下，您有三个组成部分：

布局构建器（服务器端）
数据库选择界面（服务器端）
ajax caller（客户端）

两个服务器端脚本应该分成两个文件。

正如您所看到的，这种方法比第一种方法更复杂，但有时效率更高。

<强>摘要

由于数据库选择，第一种方法可能会有更长的页面加载时间。但是可以很好地优化好的sql代码，因此查询时间可以用毫秒来衡量。在简单的用例中，这是最好的方法。

当您想要加载或动态修改更复杂的数据集时，应使用第二个。

我推荐你第一个选择。

祝你好运！

Answer 2

您可以将大图片网址设置为data-*属性，例如

echo "<img src='". $row['url'] ."' data-big='". $row['bigimage'] ."' class='media-image' />";

然后

$('.media-image').click(function () {
    var src = $(this).data('big');
    $('#bigimage').attr('src', src);
});

Answer 3

PHP脚本在服务器端运行，它生成HTML以及图像和JavaScript东西

然后在客户端（浏览器），您将执行图像点击事件（使图像更大）

但要使用“src”从数据库中获取图像信息，您需要发出另一个服务器请求（在服务器端向PHP文件发出请求）

通过刷新现有页面或通过Ajax调用

最好使用Ajax调用，也可以从JavaScript获取“src”值，只需将其作为参数传递给PHP文件，并使用“src”param

Jquery img src变量到php变量？

3 个答案: