Question

我的jQuery Ajax代码是：

<div class="page_rank">
 <form name="searchForm" id="searchForm" method="post">
 <span class="my_up_text">ENTER THE WEBSITE TO CHECK GOOGLE PAGE RANK:</span>
 <br /><br />
 <input type="text" name="my_site"/></div><div class="p_ity"><input type="submit" class="btn" value="PAGE RANK" /> </form></div><div id="my_pass"></div>

<script>
  function sub_form()
  {
      document.forms["searchForm"].submit();
  }

  $(function () {
    $('form#searchForm').on('submit', function(e) {
                    $( ".p_ity" ).hide();

        $.ajax({
            type: 'post',
            url: 'check-google-page-rank.php',
            data: $('form').serialize(),
            success: function (data) {
                $('#my_pass').html(data);

            }
        });
        e.preventDefault();
    });
});     
</script>

我的PHP代码是：

<?php
  header('Content-type: image/jpeg');
require('./get_page_rank.php');
$url=$_POST['my_site'];
//echo $url;
$pr = new PR();
//$rank= $pr->get_google_pagerank($url);
$rank=$pr->get_google_pagerank($url);

  // Create Image From Existing File
  $jpg_image = imagecreatefromjpeg('./images/page-rank/G.jpg');
if($jpg_image)
{
  // Allocate A Color For The Text
  $white = imagecolorallocate($jpg_image, 0, 0, 0);

  // Set Path to Font File
  $font_path = './images/page-rank/Helvetica.TTF';

  // Set Text to Be Printed On Image
  $text = $rank;

  // Print Text On Image
  imagettftext($jpg_image, 85, 0, 305, 100, $white, $font_path, $text);

  // Send Image to Browser
  imagejpeg($jpg_image,NULL,100);

  // Clear Memory
  imagedestroy($jpg_image);
}
?>

如果我使用手动输入单独执行PHP，它可以正常工作，所以我认为问题在于jQuery html()函数。我确定图像没有损坏，我使用的是utf-8编码，我也尝试了base64_encode(imagejpeg())但得到了相同的输出。

输出：

��*����D\�@��梸�����[[h� ��0 s��('�y\�ӎ+��_�P 7��){�i�i��ĽOH�
_��:�� VV���y�x���o~�Eh��R��U�1�C����|�~,�ѿ
��7׼c��|S�����W�:�g��� ����K�z��A��D .͓�<�n��F� d�Qƹ̸{%�*֣�2�q7c�9UJ�0s��w�ߞ>ҥX��UaQG��w�bq8��

Answer 1

imagejpeg()直接将图片输出到浏览器，因此响应不是您可以与.html()一起使用的html内容，在这种情况下您不必使用ajax，网址应该是用作图片代码的src。

你可以这样做：

$(function () {
    $('form#searchForm').on('submit', function(e) {
        $( ".p_ity" ).hide();
        $('<img />').attr('src', 'check-google-page-rank.php?my_site='+ encodeURIComponent($('[name= "my_site"]').val())).load(function() {
          $(this).appendTo('#my_pass');
        });
        e.preventDefault();
    });
});

将$url=$_POST['my_site'];更改为$url=$_GET['my_site'];。

Answer 2

在你的php处理程序中，将你的图像写在一个文件中;

$imgFolderPAth = "/path/to/img/";
imagejpeg($jpg_image,$imgFolderPAth . "image.jpg",100);
echo $imgFolderPAth . "image.jpg";

和你的js;

$.ajax({
    type: 'post',
    url: 'check-google-page-rank.php',
    data: $('form').serialize(),
    success: function (data) {
        $('#my_pass').html('<img src="' + data + '"/>');

    }
});

或者您可以使用;

imagejpeg($jpg_image,NULL,100);
$rawImageBytes = ob_get_clean();

echo "<img src='data:image/jpeg;base64," . base64_encode( $rawImageBytes ) . "' />";

在您的js中，您可以按原样使用

imagejpeg（）php返回垃圾值

2 个答案: