使用JQuery和PHP可以在瀏覽器上顯示文本和圖像嗎？

我正在學習使用JQuery和PHP。我只想在特定的時間間隔內在瀏覽器上顯示文本和PHP生成的圖像。使用JQuery和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>

loadPHP頁

<?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頁面我得到這個： enter image description here

隨機數似乎是工作的罰款。我確實看到它每隔兩秒就會改變一次，但圖像全都搞砸了。我看到的只是二進制字符。這是因爲你只能從PHP返回圖像，絕對沒有TEXT和圖像？我怎樣才能解決這個問題？

來源

2014-12-02 ThN

HTML不能這樣工作。您需要查看將您的內容加載到''元素的'src'屬性中，而不是div。 – 2014-12-02 17:17:56

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腳本使用。

在其他有關加載圖像和文本的註釋中，您需要牢記的是，任何單個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>

無論是方式，你需要一個單獨的服務器端（或同一個腳本內的邏輯路徑）來獨立於text/html生成圖像。

來源

2014-12-02 17:26:50

所以，基本上你告訴我的是，你只能有PHP返回的圖像，沒有別的。如果我想讓PHP返回任何其他東西，我需要有一個單獨的PHP文件。 – ThN 2014-12-02 17:41:46

@ThN您的主要需求應該是：您不只是將圖像內容提供到任意HTML元素中，您需要將其提供到「src」屬性中，並且您只能從Web請求中提供一種類型的內容在任何時候（就Content-type頭文件而言）。如@Falk所述，有一個選項可將Base 64編碼圖像內容直接提供給源屬性。但是在這裏你可以將這個提供給調用客戶端，作爲text/html響應的一部分而不是image/png響應。 – 2014-12-02 17:47:04

謝謝。你的答案有效。 – ThN 2014-12-02 20:09:36

也許來代替：

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

，你應該這樣做：

<img src="loadPHP.php">

您不需要的JavaScript load()電話。

來源

2014-12-02 17:23:22

好吧，如果你這個，那麼你只能從PHP圖像返回。我也想回顯文字和PHP圖像。 – ThN 2014-12-02 17:29:24

這並不能解決想要定期執行此操作的問題。 – 2014-12-02 17:38:12

這應該工作：

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

來源

2014-12-02 17:28:38

第一次迭代後它不起作用，因爲瀏覽器只會服務於來自緩存的同一圖像URL的重複調用。 – 2014-12-02 17:29:26

仍然我的答案是可行的...更改我的答案發送查詢字符串參數，這實際上防止瀏覽器緩存... – 2014-12-02 17:35:32

如果你是服務的圖像與SRC指出loadPHP.php你應該使用img標籤。要每隔幾秒刷新一次映像，您應該看看Refresh image with a new one at the same url，這表明您應該在img URL上追加一個時間戳以欺騙緩存。在PHP頁面中，你不應該輸出一個隨機數字，它會搞砸了。

或者，您可以以<img src="data:image/png;base64,[data-uri]>格式從PHP腳本提供HTML代替image/png。要從GD生成數據URI，請查看Convert GD output to base64。

來源

2014-12-02 17:29:20 Falk

是的，我明白了，我只是做出了改變。它的工作原理，但我也想在同一個PHP文件中回顯文本。那可能嗎？ – ThN 2014-12-02 17:32:24

使用我的替代方法，只是回聲HTML數據，而不是原始png。 – Falk 2014-12-02 17:35:14

使用JQuery和PHP可以在瀏覽器上顯示文本和圖像嗎？

回答

相關問題