如何在JavaScript中使用来自数据库/PHP的JSON

Question

我正在使用一个地图插件来呈现一些数据。这些数据来自数据库，并以json文件的形式出现——脚本效果很好。我决定直接使用php输出的数据而不是生成json文件。但由于某种原因，JavaScript无法接受直接的php输入。我正在使用codeigniter MVC。

以下是目前有效的示例代码：

$.getJSON('_data/index/data.json', function(data){ ...

这是我尝试过的：

 var dataMap = '<? print $mapData;?>';
        $.getJSON(dataMap, function(data){...

* 编辑 2 *

根据答案 - 这个选项也不起作用。

var dataMap = '<?php echo $mapData;?>';
        $.get(dataMap, function(data){...

这里是JSON数据

{"countries":{"AL":"1","GB":"1","RS":"1","BG":"6","CA":"3","AT":"2","CD":"1"}}

编辑

$mapData 是

FOREACH LOOP
 $retdata['countries'][] = strtoupper($row->code);
 $retdata['num'][] = $row->num;
ENDFOREACH LOOP
 $retdata['countries'] = array_combine($retdat['code'], $retdata['num']);
 $retdata = json_encode($retdata);

然后将其像平常一样输出到文件中。这是进入模型的过程，然后我将其传递给控制器再传递给视图。在我的文件中，$dataMap 中的字符串和发送到视图中的字符串是相同的。

- Ando

---

尝试使用echo：var dataMap = '<? echo $mapData;?>'; - peacemaker

你能展示一下 $mapData 是什么吗？$.getJSON 是一个到服务器的 ajax 请求的快捷方式。也就是说，它应该是返回 JSON 数据的路径/URL。 - peacemaker

print_r($mapData)与上面的JSON数据相同。当我使用echo时，控制台会将JSON添加到链接中并打印403（Forbidden）jquery.min.js:2。 - Ando

添加了关于$mapData以及我如何创建它的更多信息。 - Ando

太好了，看起来你可以直接使用$mapData，因为它已经是一个JSON字符串了。 - peacemaker

作为替代方案，您可以直接在JavaScript赋值上进行JSON编码：var dataMap = <?php echo json_encode($mapData) ?>; - ramabarca

Answer 1

如果您只是要直接将JSON数据插入到JavaScript变量中（而不是使用AJAX），那么您根本不需要getJSON调用。只需像这样直接编写对象即可。

var js_object = <?php echo $mapData; ?>;
alert(js_object.countries.AL);
alert(js_object.countries.GB);

请注意，PHP字符串没有嵌入引号中，这意味着您直接创建了一个JavaScript对象字面量，而不是需要通过JSON.parse()解析为对象的字符串。

- Mike Brant

---

我猜我没有理解你想做什么。如果您在创建页面源时将JSON对象注入JavaScript变量，则根本不需要任何get或getJSON。然后，您可以在任何想要的函数中使用此对象。请参阅我的更新答案，以了解如何使用该对象的示例。 - Mike Brant

Answer 2

直接使用dataMap作为JSON。

alert(dataMap.countries.AL); //output: 1

- Matheus Azevedo

Answer 3

根据您更新的代码，看起来您根本不需要调用getJSON，因为您已经有了JSON数据。

只需将<? echo $mapData;?>赋值给JavaScript代码中的变量，并直接使用即可。

- peacemaker

Answer 4

尽管给出的答案有效，但您可能希望以不同的方式实现它，以便您的代码更易于维护。

您可以拥有一个控制器来处理所有API调用，并将所有与地图相关的功能放置在那里。

如果您的控制器被称为“maps”，并且您创建了一个名为“countries”的方法，该方法从数据库中获取并返回包含国家信息的JSON，则在JS中，您可以执行以下操作：

$.get('maps/countries', function(data){
  console.log(data.countries);
  //outputs: {"AL":"1","GB":"1","RS":"1","BG":"6","CA":"3","AT":"2","CD":"1"}
};

更多关于 CI 控制器 的内容

- tonyjmnz