Я пытаюсь показать котенка div на странице ajax_form, которая показывает диаграмму google в своем div. То, что содержимое, которое я помещал в основную часть страницы ajax_form.php, можно было увидеть через ajax, но не только в диаграмме.
<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta content="utf-8" http-equiv="encoding" /> <script type="text/javascript"> function viewChart(form, e){ e.preventDefault(); e.returnValue=false; var xmlhttp; 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; } } alert("hi"); xmlhttp.open(form.method, form.action, true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(); } //------------------Chart function end </script> </head> <body> <form action="ajax_form_temp.php" method="post" onsubmit="viewChart(this, event)" /> <h4>CLICK TO VIEW CHART</h4> <input type="submit" class="submit" value="submit" name="view"/> </form> <br /> <div id="txtHint"> <b>Person info will be listed here.</b> </div> </body> </html> и ajax_form_temp.php:
<html> <head> <!--Load the Ajax API--> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta content="utf-8" http-equiv="encoding" /> <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 jsonData = $.ajax({ url: "ajax_graph_temp.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); var options = { title: 'Index analysis', is3D: 'true', width: 800, height: 600 }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--this is the div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
Он показывает график путем перенаправления на страницу wihout с использованием ajax, но не отображается в ajax_form.php, когда используется ajax!
Somthing как $('#PutInToThisDiv').load('FromThisPage.php #FromThisDiv');
Я завершил его: у меня был сбой, потому что я не мог правильно загрузить google 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"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart);
Вот полный код, был бы полезен для других:
<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta content="utf-8" http-equiv="encoding" /> <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"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawVisualization(dataFromAjax) { var jsonData = $.ajax({ url: "ajax_graph_temp.php", dataType:"json", async: false }).responseText; var data = new google.visualization.DataTable(jsonData); var options = { title: 'Index analysis', is3D: 'true', width: 800, height: 600 }; var chart = new google.visualization.PieChart(document.getElementById('txtHint')); chart.draw(data, options); } function makeAjaxCall() { $.ajax({url:'test.php', data: {}, success: function(responseData) { drawVisualization(); } }); } </script> <script type="text/javascript"> //------------------script 2 starts --------- function showUser(form, e) { e.preventDefault(); e.returnValue=false; var xmlhttp; var submit = form.getElementsByClassName('submit')[0]; var sent = form.elements['sent'].value; var id = form.elements['id'].value; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(e) { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open(form.method, form.action, true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send('sent=' + sent + '&id=' + id + '&' + submit.name + '=' + submit.value); } </script> </head> <body> <h4>INSERT</h4> <form action="db_process.php" method="POST" onsubmit="showUser(this, event)"> <pre> <label>Enter the sentence: <input type="text" name="sent"></label><br/> </pre> <input type="submit" class="submit" name="insert" value="submit"/> <input type="" name="id" style="display: none"/> </form> <h4>UPDATE</h4> <form action="db_process.php" method="POST" onsubmit="showUser(this, event)"> <pre> <label>Enter the ID: </label><input type="text" name="id"><br> <label>Enter the sentence: <input type="text" name="sent"></label><br /> </pre> <input type="submit" class="submit" value="submit" name="update"/> </form> <form action="ajax_form_temp.php" method="post" onsubmit="viewChart(this, event)" /> <h4>CLICK TO VIEW CHART</h4> <input type="button" onclick="makeAjaxCall();return false;" value="View Graph"></input> </form> <br /> <div id="txtHint"> <b>Data will be shown here</b> </div> </body> </html>
ajax_temp_form.php отправка json-данных:
<?php $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_view'); $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'ind_type', 'type' => 'string'), array('label' => 'Index_val', '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['Index_val']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; // convert data into JSON format $jsonTable = json_encode($table); echo $jsonTable; ?>