可以使用 JQuery 和 PHP 在浏览器上显示文本和图像吗？答案

【问题标题】：Can a text and an Image be displayed on a browser using JQuery and PHP?可以使用 JQuery 和 PHP 在浏览器上显示文本和图像吗？
【发布时间】：2014-12-02 17:14:30
【问题描述】：

我正在学习使用 JQuery 和 PHP。我只是想以特定的时间间隔在浏览器上显示一个文本和一个 PHP 生成的图像。

HTML 页面：

<html>

<head>
  <title>Testing PHP</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    <!--
    $(document).ready(function() {
      loadPHP();
    });

    function loadPHP() {
        $("#PHP_data").load("loadPHP.php");
        setTimeout(loadPHP, 2000);
      }
      //-->
  </script>

</head>

<body>
  <div id="PHP_data"></div>
</body>

</html>

加载PHP页面

<?php

$rannum = mt_rand(1,100);

echo $rannum;

$thick = 10;
// create a 200*200 image
$img = imagecreatetruecolor(200, 200);

// Add antialias
imageantialias ($img, true);

// allocate some colors
$white = imagecolorallocate($img, 255, 255, 255);

// draw the dashed circle

for($t = 1;$t<($thick+1);$t++) {
  for($i = 0;$i<360;$i+=10) {
      imagearc($img, 100, 100, 200-($t/5), 200-($t/5),  $i, $i+5, $white);
      imagearc($img, 100, 100, 200+($t/5), 200+($t/5),  $i, $i+5, $white);
  }
}

// output image in the browser
header("Content-type: image/png");
imagepng($img);

// free memory
imagedestroy($img);

?>

当我调用 HTML 页面时，我得到以下信息：

随机数似乎工作正常。我确实看到它每两秒就会改变一次，但图像都搞砸了。我看到的只是二进制字符。这是因为您只能从 PHP 中返回图像并且绝对没有 TEXT 以及图像吗？我该如何解决这个问题？

【问题讨论】：

HTML 不能那样工作。您需要考虑将内容加载到 <img> 元素的 src 属性中，而不是加载到 div 中。

标签： javascript php jquery html image

【解决方案1】：

HTML 不是这样工作的。您需要考虑将内容加载到元素的 src 属性中，而不是加载到 div 中。

这是我的建议。让你的 HTML 看起来像这样：

<body>
    <div><img id="changing_image" src=""></div>
</body>

注意，您现在正在处理一个我们需要更改 src 属性的图像元素。

让你的 javascript 看起来像这样：

<script type="text/javascript">
<!--
$(document).ready(function(){    
    loadPHP();
});

function loadPHP(){
    var cacheBuster = Math.random().toString(36).slice(2);
    $('#changing_image').attr('src', 'loadPHP.php?q=' + cacheBuster);
    setTimeout(loadPHP, 2000);
}
//-->
</script>

请注意，我们在 URI 中引入了一个随机变量。这里的唯一目的是防止任何浏览器端缓存。您的 PHP 脚本不会以任何方式使用此参数。

对于您在其他 cmets 中有关加载图像和文本的问题，您需要记住，任何单个 Web 请求只能发送一种内容类型的数据。如果要发送图像数据和文本数据，则需要两个单独的请求。这可能意味着您的 javascript 函数需要如下所示：

function loadPHP(){
    var cacheBuster = Math.random().toString(36).slice(2);
    $('#changing_image').attr('src', 'loadPHP.php?q=' + cacheBuster);
    $('#some_text_element').load('different_php_script_that_generates_html.php');
    setTimeout(loadPHP, 2000);
}

或者像你最初做的那样只调用一个 $.load()，但让它返回 HTML 内容，比如

<img src="image_generator.php?q=some_cache_buster">
<div>Some text</div>

无论哪种方式，您都需要一个单独的服务器端（或同一脚本中的逻辑路径）来与文本/html 分开生成图像。

【讨论】：

所以，基本上你告诉我的是你只能让 PHP 返回图像而没有别的。如果我希望 php 返回任何其他内容，我需要有一个单独的 PHP 文件。
@ThN 您的主要收获应该是：您不只是将图像内容提供给任意 HTML 元素，您需要将其提供给 src 属性，并且您只能提供一个随时来自 Web 请求的内容类型（就 Content-type 标头而言）。 @Falk 指出有一个选项可以将 Base 64 编码的图像内容直接提供到源属性中。但是在这里，您可以将其作为文本/html 响应的一部分而不是图像/png 响应的一部分提供给调用客户端。

【解决方案2】：

也许不是：

<div id="PHP_data"></div>

你应该这样做：

<img src="loadPHP.php">

您不需要 javascript load() 调用。

【讨论】：

好吧，如果你这样做，那么你只能从 PHP 图像返回。我也想回显文本和php图像。
这并不能解决想要定期执行此操作的问题。

【解决方案3】：

这应该可行：

<html>

<head>
  <title>Testing PHP</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    <!--
    $(document).ready(function() {
      loadPHP();
    });

    function loadPHP() {
        $("#PHP_data").html('&lt;img src="loadPHP.php?rnd=' + Number(new Date()) + '" /&gt;');
        setTimeout(loadPHP, 2000);
      }
      //-->
  </script>

</head>

<body>
  <div id="PHP_data"></div>
</body>

</html>

【讨论】：

它在第一次迭代后无法工作，因为浏览器只会从缓存中的相同图像 URL 重复调用。
我的答案仍然可行...更改了我的答案以发送查询字符串参数，这实际上阻止了浏览器缓存...

【解决方案4】：

如果您提供图片，则应使用 img 标签，其 src 指向 loadPHP.php。要每隔几秒刷新一次图像，您应该查看Refresh image with a new one at the same url，这表明您应该在 img URL 上附加一个时间戳以欺骗缓存。在PHP页面中，你不应该输出一个随机数，它会搞砸。

或者，您可以从 PHP 脚本以 <img src="data:image/png;base64,[data-uri]> 格式提供 HTML 而不是 image/png。要从 GD 生成数据 URI，请查看 Convert GD output to base64。

【讨论】：

是的，我明白这一点，我刚刚做了您的更改。它可以工作，但我也想从同一个 PHP 文件中回显文本。这可能吗？
使用我的替代方法，只回显 HTML 数据，而不是原始 png。