Question

我试图在ajax_form页面中显示div的强大功能，在其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>

它通过使用ajax重定向到页面显示图形，但是当使用ajax时不显示在ajax_form.php中！

Answer 1

像$('#PutInToThisDiv').load('FromThisPage.php #FromThisDiv');

这样的东西

Answer 2

我完成了它：我失败了，因为我无法正确加载谷歌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;
?>

从另一个php页面加载div的内容并使用ajax显示

2 个答案: