通过页面的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请求加载图形

回答

相关问题