阿賈克斯加載另一個PHP頁面的內容

我有兩個單獨的代碼： 1.一種形式顯示的內容數據庫按鈕點擊（form.php） 2.另一個PHP頁面whoch顯示圖表div檢索內容從MySQL數據庫加載。（graph.php）阿賈克斯加載另一個PHP頁面的內容

我是新來的ajax。我試圖在另一個php頁面（form.php）div上顯示圖表，其代碼存在於graph.php中。

問題是graph.php它顯示圖表載入事件使用div的ID存在於同一頁面本身（graph.php）來顯示圖形。我怎樣才能在本格在form.php的

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>

並從數據庫加載數據並顯示圖表使用谷歌圖表API另一個頁面加載這個頁面是 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>

來源

2013-07-13 user123

原諒我，如果林不理解這個正確的，但有一個原因，你不能使用兩個不同的ID對每個單嗎？ –

你還有一個額外的「x」在你的最後一個ID「txxtHint」 –

@ A.O .:我使用了兩個不同的ID。在這種情況下，graph出現在graph.php頁面的div中。 – user123

首先，你必須對PHP文件的JSON的所有數據，包括HTML的jquery然後使用此代碼：我希望它會幫助你

個HTML

<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'); 
});

來源

2013-07-13 03:06:51

我的目的不是爲了解決這個問題。我正在學習ajax。有沒有可能不使用json？在其他情況下，你能告訴我我應該在哪裏嵌入json代碼？ – user123

你想從數據庫獲取它的日期是什麼？發送給我的例子，但數據與出js –

我想'列 - index_type和計數得到-ve和+ ve索引值。索引類型是pcount和ncount，都具有int值。我知道沒有JavaScript是不可能的，但你給的代碼，我不知道在哪裏放置以及如何使用。我仍然在學習js，json！ – user123

阿賈克斯加載另一個PHP頁面的內容

回答

相關問題