通過頁面的div標籤中的ajax請求加載圖形

graph.php

<?php $mak="1"; 
    $sen="5"; 
    ?> 
<html> 
<head> 
    <title>Pollution Mapper</title> 
    <!-- Load jQuery --> 
    <script language="javascript" type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> 
    </script> 
    <!-- Load Google JSAPI --> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
     google.load("visualization", "1", { packages: ["corechart"] }); 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
      var jsonData = $.ajax({ 
       type: "POST", 
       url:"json.php" , 
       dataType: "json", 
       data: { mak: <?php echo $mak; ?> , sen: <?php echo $sen; ?> }, 
       async: false, 
       success: function(){ 
        alert("asd"); 
       } 
      }).responseText; 

      var data = new google.visualization.DataTable($.parseJSON(jsonData)); 



      var chart = new google.visualization.AreaChart(
         document.getElementById('Chart_div')); 
      chart.draw(data); 
     } 

    </script> 

</head> 
<body> 
<div id="Chart_div"></div> 
</html>

AJAX請求調用上述網頁是

$(document).on('click', '.jqf', function() { 

    $.ajax({ 
      type: "POST", 
      url: "./graph.php", 
      data: { mak: $('.makid').attr('id') , sen: $(this).attr('name') }, 
      success: function(){ 
      } 
     }); 
     return false; 

});

上面的函數是index.html文件內。我想在沒有重新加載文件的情況下在index.html文件中加載圖形。我應該怎麼做？

來源

2014-02-23 user2147744

你在PHP中有一個Javascript函數？ – Shahar

是的JavaScript函數是在PHP文件中。 – user2147744

你想從./graph.php獲得成功嗎？ – Popo

它做，首先我刪除graph.php並直接插入功能，如Sam R說。

function loadChart(inMak, inSen) { 

    google.load("visualization", "1", { 
     packages: ["corechart"] 
    }); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      type: "POST", 
      url: "./json.php", 
      dataType: "json", 
      data: { 
       mak: inMak , sen: inSen 
      }, 
      async: false, 
      success: function() { 
       alert("asd"); 
      } 
     }).responseText; 

     var data = new google.visualization.DataTable($.parseJSON(jsonData)); 

     var chart = new google.visualization.AreaChart(
     document.getElementById('Chart_div')); 
     chart.draw(data); 
    } 
} 

$(document).on('click', '.jqf', function() { 
    loadChart($('.makid').attr('id'), $(this).attr('name')); 
    return false; 
});

現在要做的唯一的變化是這個

而不是

google.load("visualization", "1", { 
     packages: ["corechart"] 
    });

寫

google.load("visualization", "1", { 
     packages: ["corechart"] , callback : drawChart 
    });

，並刪除

google.setOnLoadCallback(drawChart);

來源

2014-02-24 00:43:37 user2147744

我認爲把這個腳本放在已經在頁面上的函數中並不需要調用服務器來設置你通過JavaScript傳遞的兩個參數（通過AJAX數據）。

This jsbin大致顯示了這個想法。

來源

2014-02-23 17:29:24

我做到了，但頁面正在重新加載，沒有內容顯示 – user2147744

檢查此[鏈接]（http://riidl.org/映射器/）。點擊標記，然後點擊溫度圖像，圖表應顯示在這些圖像下方。 – user2147744

您是否試過這樣做？在你

<div id='chartHolder'></div>

成功方法在Ajax調用：

一個div添加到您的索引頁

$('#chartHolder').load('./graph.php');

或：

$.ajax({ 
      type: "POST", 
      url: "./graph.php", 
      data: { mak: $('.makid').attr('id') , sen: $(this).attr('name') }, 
      success: function(data){ 
       $('#chartHolder').html(data); 
      } 
     }); 
     return false; 

});

來源

2014-02-23 17:36:25 Popo

沒有，這是行不通的 – user2147744

通過頁面的div標籤中的ajax請求加載圖形

回答

相關問題