Php AJAX：将图表数据显示为IMG_Php_Ajax_Charts_Image

Php AJAX：将图表数据显示为IMG

php ajax charts image

Php AJAX：将图表数据显示为IMG,php,ajax,charts,image,Php,Ajax,Charts,Image,我想用AJAX显示（图表）图像。我不确定出了什么问题，但我得到了以下“错误”和不正确的图像： “| xtt�我��{饗BBBN�:��}�̛7oƏA7n�0l߾}qqqiiiee�啊哈��ضm��西医��v��U�&�Z��o�# 艺术]]]��{��#""��'��五|�ҥkqq��ح�~;11�ȑ#��޺u��ںm6O�7o��.��ի��?~Ȑ!��~��۷��O�0A。�个人简历��TäR）�� ˗{N��5. 图表将显示在这里。

我想用AJAX显示（图表）图像。我不确定出了什么问题，但我得到了以下“错误”和不正确的图像： “| xtt�我��{饗BBBN�:��}�̛7oƏA7n�0l߾}qqqiiiee�啊哈��ضm��西医��v��U�&�Z��o�# 艺术]]]��{��#""��'��五|�ҥkqq��ح�~;11�ȑ#��޺u��ںm6O�7o��.��ի��?~Ȑ!��~��۷��O�0A。�个人简历��TäR）�� ˗{N��5.

图表将显示在这里。 ajax\u select\u NEW.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>

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

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

?>


var-xmlhttp；
函数showUser（str，年龄）
{
var url='test_ajax.php'；
url+='？q='+str+'&a='+age+'&sid='+Math.random（）；
document.getElementById（'txtHint'）。innerHTML=''；
xmlhttp=GetXmlHttpObject（）；
if（xmlhttp==null）
{
警报（“浏览器不支持HTTP请求”）；
返回；
}
onreadystatechange=stateChanged；
open（“GET”，url，true）；
xmlhttp.send（空）；
}
函数GetXmlHttpObject（）
{
if（window.XMLHttpRequest）
{
//IE7+、Firefox、Chrome、Opera、Safari的代码
返回新的XMLHttpRequest（）；
}
if（window.ActiveXObject）
{
//IE6、IE5的代码
返回新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
返回null；
}

test\u ajax.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>

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

<?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页面没关系）

我搜索了很多，但找不到解决方案。希望有人能在这里帮助我，我将不胜感激！

您正在尝试将二进制图像数据放入

img

的

src

属性中。该属性用于图像的源URL，您可以完全不用

XmlHttpRequest

，ju使用

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 + '" />';
}

这就是ajax\u select\u 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>


函数showUser（str，年龄）{
var url='test_ajax.php'；
url+='？q='+str+'&a='+age+'&sid='+Math.random（）；
document.getElementById（'txtHint'）。innerHTML=''；
}

您是否可以通过如下方式来检查您的回复文本：alert（xmlhttp.responseText）；我这样做了，得到了与需要显示图像的页面上相同的文本：�巴布亚新几内亚IHDR��我+/� IDATx��y\TU��;�8.��* �"H��[�H��Ff�即�Zj�Dffjnm�� ......"非常感谢。它现在可以工作了！我不必更改内容类型标题，但您的函数工作得很好，解决了问题。我想我把'document.getElementById（'txtHint'）。innerHTML=''；'放在了错误的函数中。当然，我想这样做，但找不到'answer'按钮？（这是页面底部的“发布你的答案”吗？：）顺便说一句，如果可能的话，还有一个问题：可以把var url和“document.getElementById（'txtHint'）。innerHTML=”；“function showUser（str，age）{”放在“function showUser（str，age）{”之后吗？请看我编辑的第一篇帖子（ajax_select_NEW.php）。我只想知道这个脚本是否还可以，我已经完成了。（因为如果我将var url等放在一个单独的函数（ajax\u select.php）中，它就不起作用了…）但我不确定这是否是正确的解决方案。再次感谢。你可以省略整个

XmlHttpRequest

部分，你不需要它。标签中唯一的东西应该是我给你的函数。我编辑了我的帖子。至于接受回答：再次感谢。我不确定我是否可以为你省略单独的代码ld（IE）浏览器等。答案现在已解决！