Ajax для загрузки содержимого другой страницы php

У меня был два отдельных кода: 1. Одна форма, показывающая содержимое базы данных при нажатии кнопки (form.php) 2. Еще одна страница php page показывала диаграмму в div, получая содержимое из базы данных mysql при загрузке. (graph.php)Ajax для загрузки содержимого другой страницы php

Я новичок в ajax. Я попытался показать диаграмму на другом php page (form.php) div, код которого присутствует в файле graph.php.

Проблема заключается в том, что graph.php, на котором показана диаграмма на событии загрузки, использует идентификатор div, присутствующий на той же самой странице (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>

И другую страницу, которая загружает данные из БД и показывает диаграмму с помощью Google Chart 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

простите меня, если Im не понимая это правильно, но есть причина, вы не можете использовать два различных идентификаторов для каждого DIV? –

также у вас есть дополнительный «x» в вашем последнем ID «txxtHint» –

@ A.O .: Я использовал два разных идентификатора. В этом случае граф появлялся на div на странице graph.php. – user123

сначала вы должны сделать все данные с JSON на PHP файл, включает в JQuery на HTML, то используйте этот код: я надеюсь, что это поможет вам

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

Какова дата, когда вы хотите получить ее из базы данных? Пришлите мне пример из out, но из данных с помощью js –

Я пытаюсь получить значение -ve и + ve для значения 'column - index_type и counts. Тип индекса - pcount и ncount, и оба имеют значение int. Я знаю, что без javascript это невозможно, но код, который вы дали, я не знаю, где разместить и как использовать. Я все еще учусь js, json! – user123

Ajax для загрузки содержимого другой страницы php

ответ

Смежные вопросы