Ajax加载另一个php页面的内容_Php_Ajax_Cakephp Ajaxhelper

Ajax加载另一个php页面的内容

php ajax

Ajax加载另一个php页面的内容,php,ajax,cakephp-ajaxhelper,Php,Ajax,Cakephp Ajaxhelper,我有两个独立的代码： 1.一个表单在单击按钮时显示数据库的内容（form.php） 2.另一个php页面，它将图表显示到div中，并在加载时从mysql数据库检索内容。（graph.php）我不熟悉ajax。我试图在另一个php页面的（form.php）div上显示图表，其代码显示在graph.php中问题是graph.php，它在加载时显示图表事件使用同一页面本身（graph.php）中的div id来显示图表。如何在form.php中的div中加载此页面 form.php <htm

我有两个独立的代码： 1.一个表单在单击按钮时显示数据库的内容（form.php） 2.另一个php页面，它将图表显示到div中，并在加载时从mysql数据库检索内容。（graph.php）

我不熟悉ajax。我试图在另一个php页面的（form.php）div上显示图表，其代码显示在graph.php中

问题是graph.php，它在加载时显示图表事件使用同一页面本身（graph.php）中的div id来显示图表。如何在form.php中的div中加载此页面

form.php

<html><head><script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","graph.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="submit"onclick="showUser(this.value)"/>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>


函数showUser（str）
{
如果（str==“”）
{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“graph.php？q=“+str，true”）；
xmlhttp.send（）；
}


此处将列出人员信息。

另一个从数据库加载数据并使用GoogleChartAPI显示图表的页面是 graph.php：

<?php
$q=$_GET["q"];
  $mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}

  $result = $mysqli->query('SELECT * FROM new_temp');
  $rows = array();
  $table = array();
  $table['cols'] = array(

    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'sum', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();
      $temp[] = array('v' => (string) $r['ind_type']); 
      $temp[] = array('v' => (int) $r['sum']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
      var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="txtHint"></div>
  </body>
</html>


//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
变量选项={
标题：“指数分析”，
is3D:'正确'，
宽度：800，
身高：600
};
var chart=new google.visualization.PieChart（document.getElementById（'txtHint'）；
图表绘制（数据、选项）；
}

首先，您必须在php文件中使用json生成所有数据，包括html上的jquery，然后使用以下代码：我希望它能帮助你

HTML

如果我没有正确理解，请原谅，但是有什么原因你不能为每个div使用两个不同的ID吗？另外，你的上一个ID“txxtHint”@a.O.中还有一个额外的“x”：我使用了两个不同的ID。在这种情况下，graph出现在graph.php页面的div中。@a.O:我认为相同或不同的ID在这里不是问题。问题是不同的，我无法解决！我的目的不仅仅是解决这个问题。我正在努力学习ajax。不使用json也可以吗？在其他情况下，您能告诉我应该在哪里嵌入json代码吗？您希望从数据库中获取json代码的日期是什么？给我发一个out的例子，但是没有数据，jsI正在尝试为

列-索引类型和计数获取-ve和+ve索引值。索引类型是pcount和ncount，两者都有int值

。我知道没有javascript是不可能的，但是你给出的代码，我不知道放在哪里以及如何使用。我还在学习js，json！

<form action="graph.php" method="get">
  <input type="text" name="q" />
  <input type="submit"/>
</form>

$("form").on("submit", function(){
 $.get($('form').attr('action'), $('form').serialize(), 
     function(result) {
         $("#txtHint").html(result);
      },'json');
 });