可以使用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?

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.

Perhaps instead of:

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

you should do something like:

<img src="loadPHP.php">

You wouldn't need the javascript load() call.

This should work:

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

If you are serving an image you should use an img tag with the src pointed to loadPHP.php. To refresh the image every few seconds you should take a look at Refresh image with a new one at the same url which suggests that you should append a timestamp to the img URL in order to fool the cache. In the PHP page, you shouldn't output a random number, it will mess things up.

Alternatively, you could serve HTML instead of image/png from the PHP script in the format <img src="data:image/png;base64,[data-uri]>. To generate the a data URI from GD, have a look at Convert GD output to base64.