AJAX: отображать данные диаграммы как IMG - PullRequest
1 голос
/ 09 октября 2011

Я хочу показать (диаграмму) изображение, используя AJAX.Я не уверен, что не так, но я получаю следующую «ошибку» и неправильное изображение: «| xtt�I������ {饗 BBBN�: ��} �̛7oРA7n�0l ߾} QQQIIIeee�aLHH������ ض m��wm���v��U� & �Z���o� # Art]]] ���� {��� # "" ��'���v| ҥKqqq ح ~; 11 ȑ # ޺ у y нструменты m6O7o ի ~ Ȑ ~ 7O0A.?!.�cv�����TäR) �� ����˗ {N����5 <�� & 0� ���ҷo�� @ �NХ <0�j�0�� = ���]�t��۷�j�T * 5� \ ����۳g�F�����gfm��� ݻ� 'OF ..... "</p>

Код, который яиспользуя:

ajax_select.php:

<html>
<head>
<script type="text/javascript">

var xmlhttp;

function showUser(str,age)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="test_ajax.php";
url=url+"?q="+str+"&a="+age;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML="<IMG SRC='" + xmlhttp.responseText + "'/>";
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

</script>
</head>
<body>

<form>
<select id="users" name="users">
<option value="">Select a person:</option>
<?php

$con = mysql_connect(***);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("***", $con);

$sql="SELECT ***";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
  {

  }

mysql_close($con);
?>
</select>

<select id="age" name="age">
<option value="">Select a person:</option>
<?php

$con = mysql_connect('***');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("***", $con);

$sql="SELECT ***";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
  {
  }

mysql_close($con);

?>
</select>

<input type='button' value='Refresh Data' onclick="showUser(document.getElementById('users').value,document.getElementById('age').value)">
</form>

<br><br>
<div id="txtHint"><b>chart will be displayed here.</b></div>

</body>
</html> 

ajax_select_NEW.php:

<script type="text/javascript">

var xmlhttp;

function showUser(str,age)
{
var url = 'test_ajax.php';
url += '?q=' + str + '&a=' + age + '&sid=' + Math.random();

document.getElementById('txtHint').innerHTML = '<img src="' + url + '" />';

xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }

xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}


function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

</script>

test_ajax.php:

<?php
/* Include the pData class */
include("class/pData.class.php");
include("class/pDraw.class.php");
include("class/pImage.class.php");

/* Get user from AJAX resquest */
$user_id=$_GET["q"];

$q=$_GET["q"];
$a=$_GET["a"];

/* Create the pData object */
$MyData = new pData();  

/* Connect to the MySQL database */
$db = mysql_connect("***");
mysql_select_db("***",$db);




/* Build the query that will returns the data to graph */

$Requete = "

SELECT ***
";

***
/* Render the picture (choose the best way) */
$myPicture->autoOutput("examples/example.drawBarChart.png");

?> 

Я жестко закодировал переменные в коде SQL на данный момент.(в test_ajax.php) Так что, если я открою эту страницу, она просто покажет правильное изображение диаграммы.Но когда я открываю страницу ajax_select.php, я получаю сообщение об ошибке на картинке выше.(так что это не неправильная информация о коде диаграммы, так как все в порядке, если я открою страницу php напрямую)

Я много искал, но не могу найти решение.Надеюсь, кто-то может помочь мне здесь, будет очень признателен!

1 Ответ

3 голосов
/ 09 октября 2011

Вы пытаетесь поместить данные двоичного изображения в атрибут src img.Этот атрибут предназначен для исходного URL изображения, вы можете сделать это полностью без XmlHttpRequest, просто вставьте свое изображение, используя test_ajax.php в качестве src.

function showUser(str, age) {
    var url = 'test_ajax.php';
    url += '?q=' + str + '&a=' + age + '&sid=' + Math.random();

    document.getElementById('txtHint').innerHTML = '<img src="' + url + '" />';
}

Что касается сломанногорендеринг изображения, вы включили Content-Type -заголовок?

header('Content-Type: image/png');
$myPicture->autoOutput("examples/example.drawBarChart.png");

Вот как ajax_select_NEW.php должен выглядеть следующим образом:

<script type="text/javascript">
function showUser(str, age) {
    var url = 'test_ajax.php';
    url += '?q=' + str + '&a=' + age + '&sid=' + Math.random();

    document.getElementById('txtHint').innerHTML = '<img src="' + url + '" />';
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...