Question

基本上我想通过从mysql数据库中提取数据来更改图像的'src'属性。

我有一个query.php文件和index.html文件。

query.php文档中的php脚本运行正常并获取正确的数据，现在保存在名为

的php变量中

$ newimagesrc

现在我怎么能用javascript（我猜）更改图像的'src'？我是否必须在一个文档中实现所有内容？我们的想法是显示图像，然后单击按钮重新加载页面并显示新图像。

谢谢！

我的HTML文档：

<html>
<head>
</head>
<body>
<img src="" alt=changingimage">
</body>
</html>

我的php文档：

   // mysql_connect stuff right here

  // QUERY FOR NEW IMAGE
 $imagequery = "SELECT * FROM images ORDER BY rand() LIMIT 1";
 $result = mysql_query($imagequery);
 while($row = mysql_fetch_object($result))
{
$newimagesrc = "$row->imageurl";
}

Answer 1

使用jQuery设置图像src by

$("#img_tag_id").attr("src","PATH_FROM_DB_WHICH_DISPLAYS_IMAGE")

Demo

Answer 2

以下是一些实现它的示例代码：

在用户方面，你创建了一个XHR（我将使用jquery XHR，因为它可以使用更少的行来演示，但你可以使用任何XHR包装器甚至是vanilla对象本身）

$.get('/path/to/query_script.php', { perhaps: 'you', need: ['some', 'data', 'sent', 'to', 'the', 'server'] }, function (data) {
   // Select the image somehow and apply the data you just received
   $('#myImage').attr('src', data);
});

在php方面你会有这样的事情：

// Your code to fetch the source here..
header("Content-Type: text/javascript; charset=utf-8");
echo(json_encode($newimagesrc)); // Encodes your data in a json format and hopefully sends that as *the only thing* in the response

这里要实现的一般事情是，您正在指导两个不同的参与者之间的通信 - 一个运行您的javascript代码的浏览器，以及运行您的PHP代码的服务器。浏览器需要向您的服务器发送请求（这里通过使用XHR解决），服务器必须返回一些有用的响应（这里通过以方便的json格式返回图像源来实现）。您可以扩展它以返回多于一个字符串（您可以以json格式序列化数组和整个对象），从而使用客户端上的数据。

从php变量更改图像的'src'属性，该变量由mysql查询设置

2 个答案: