如何制作以JSON ID为URL的动态网页-谷歌图表、Fusiontables、Jquery

How to make dynamic webpages with JSON ID as URL- Google Charts, Fusiontables, Jquery

本文关键字：谷歌 Fusiontables 网页 Jquery 动态 JSON 何制作 ID URL      更新时间：2023-09-26

如何制作以JSON行ID为URL的动态网页？到目前为止，我使用了谷歌图表、Fusiontables和Jquery进行点击动态加载。

所以，这是一个我根据我点击的链接创建动态图表的项目。以下是给出上下文的代码片段：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
  $(window).load(function() { 
  var TQRG = "1k_R9v0tRK9Ut2HsKSWKviDd4ZDFGmNh550C-dCeK";

然后我设置了点击功能：

$(".drawChart").click(function() {
    var trif_id = $(this).attr('id');
    drawVisualization(trif_id);

当然，有一个绘图可视化功能与此相关：

 function drawVisualization(trif_id) {
    // get the data     
$.get("https://www.googleapis.com/fusiontables/v1/query", {sql:"SELECT * FROM "+TQRG+" WHERE TRIF_ID='"+trif_id+"'", key:apiKey}, function(response) {
var columns = response.columns;
var toxicReleased2010 = response.rows[0][2];
var toxicReleased2011 = response.rows[0][3];

-然后是所有的图表参数。-

所以一切都是从谷歌融合图表中提取的，目标是根据唯一的ID加载图表。我已经成功了：

<a id="91745QMTCN720SO" class="drawChart" href="javascript:void(0);">Quemetco</a>

然而，通过这个项目，我决定如果我可以有动态URLS而不是点击操作会更好。有没有一种方法可以无缝地迁移这些代码来创建具有唯一ID的URLS？例如mysite.html/91745QMTCN720SO

这是为学校的一个小组项目（有毒排放数据显示在网站上）准备的，也是我第一次尝试任何编码。请帮帮我，我只是不知道从哪里开始找。

您可以将ID设置为URL参数：

mysite.html?id=91745QMTCN720SO

并像这样访问它们：

function getParameterByName(name) {
    name = name.replace(/['[]/, "''[").replace(/[']]/, "'']");
    var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
}
var trif_id = getParameterByName('id');
相关文章：