dpftppc9674 2014-12-02 17:14
浏览 29
已采纳

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

I am learning to use JQuery and PHP. I simply want to display a text and an PHP generated image on a browser at a specific interval.

HTML Page:

<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>

loadPHP page

<?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);

?>

When I call up the HTML Page I get this: enter image description here

The Random number seems to be working fine. I do see it changing every two seconds, but the image is all screwed up. All I see is binary characters. Is this because you can only return image from PHP and absolutely no TEXT along with the image? How can I fix this?

  • 写回答

4条回答 默认 最新

  • dpmrakfbx820320638 2014-12-02 17:26
    关注

    HTML doesn't work that way. You need to look at loading your content into the src attribute of an element not into a div.

    Here is what I would suggest. Make your HTML look like this:

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

    Note, you are now working with an image element for which we need to change the src attribute.

    And have your javascript look like this:

    <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>

    Note here that we introduce a random variable that we are introducing into the URI. The sole purpose here is to prevent any browser-side caching. This parameter would not be used by your PHP script in any manner.

    To your question in other comments about loading both image and text, you need to keep in mind that any individual web request can only send data of one content type. If you want to send image data and text data, you will need two separate requests. That may mean that your javascript function would need to look something like:

    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);
}

    Or have the just a single $.load() call like you were originally doing, but have it return HTML content like

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

    Either way, you will need a separate server-side side (or logic path within same script) to generate the image separately from the text/html.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题