Question

我目前有一个外部JSON文件data.json，我想知道如何将数据存储在html代码中，而不是调用此外部文件。

此代码的目的是动态下拉菜单。

这是我在data.json中的JSON数据

{
    "beverages": "Coffee,Coke",
    "snacks": "Chips,Cookies"
}

这是我的JQUERY

    $("#first-choice").change(function() {

    var $dropdown = $(this);

    $.getJSON("jsondata/data.json", function(data) {

        var key = $dropdown.val();
        var vals = [];

        switch(key) {
            case 'beverages':
                vals = data.beverages.split(",");
                break;
            case 'snacks':
                vals = data.snacks.split(",");
                break;
            case 'base':
                vals = ['Please choose from above'];
        }

        var $secondChoice = $("#second-choice");
        $secondChoice.empty();
        $.each(vals, function(index, value) {
            $secondChoice.append("<option>" + value + "</option>");
        });
    });
});

因此，我不想使用.getJSON调用外部文件，而是希望将数据存储在该文件中。然后我该如何更改下面的代码？

Answer 1

只需将此JSON（ JavaScript Object Notation ）分配给变量，然后在以后使用该var：

var data = {
    "beverages": "Coffee,Coke",
    "snacks": "Chips,Cookies"
}

您的最终代码为：

$("#first-choice").change(function() {
    var $dropdown = $(this);
    var data = {
        "beverages": "Coffee,Coke",
        "snacks": "Chips,Cookies"
    }
    var key = $dropdown.val();
    var vals = [];

    switch(key) {
        case 'beverages':
            vals = data.beverages.split(",");
            break;
        case 'snacks':
            vals = data.snacks.split(",");
            break;
        case 'base':
            vals = ['Please choose from above'];
    }

    var $secondChoice = $("#second-choice");
    $secondChoice.empty();

    $.each(vals, function(index, value) {
        $secondChoice.append("<option>" + value + "</option>");
    });
});

Answer 2

如果您的Javascript位于嵌入式脚本标记中，而不是位于外部页面上，则只需将JSON粘贴到变量中即可：

const data = {
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
};
$("#first-choice").change(function() {
  var $dropdown = $(this);
  var key = $dropdown.val();
  // etc

但是内联Javascript有点小巧，每次请求页面时都需要通过网络发送更多数据-将JS存储在可以缓存的外部文件中通常是个好主意。

如果这就是您正在做的（或者如果您要这样做），并且您的Javascript已链接到脚本标签的src中，那么您将不得不使用另一种方法。一种方法是将JSON放在<script>标签内，并带有type其他，而不是被解析为Javascript的JSON（以确保它不会尝试运行并遇到脚本错误）：例如，您可以使用type="application/json"，然后选择标签并解析其textContent：

const json = document.querySelector('#data').textContent;
const data = JSON.parse(json);
// etc
console.log(data);

<script type="application/json" id="data">
{
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
}
</script>

第三个选择是将其存储在标签的data-属性中，而不是存储在标签的textContent中：

const json = document.querySelector('[data-json]').dataset.json;
const data = JSON.parse(json);
// etc
console.log(data);

<script
  src="linkToYourJs"
  data-json='{"beverages": "Coffee,Coke","snacks": "Chips,Cookies"}'
></script>

Answer 3

为什么不内联变量而不是从文件中加载？

修改后的脚本

$(function() {

// Hide 2nd dropdown on document.ready
$('#second-choice').hide();

$("#first-choice").change(function() {

		var $dropdown = $(this);

		// Inlined variable instead of making a AJAX request to read it from a file!
		const data = {
		  "beverages": "Coffee,Coke",
		  "snacks": "Chips,Cookies"
		};

		var key = $dropdown.val();
		var vals = [];

		switch (key) {
		  case 'beverages':
			vals = data.beverages.split(",");
			break;
		  case 'snacks':
			vals = data.snacks.split(",");
			break;
		  case 'base':
			vals = ['Please choose from above'];
		}

		var $secondChoice = $("#second-choice");
		$secondChoice.empty();
		$.each(vals, function(index, value) {
		  $secondChoice.append("<option>" + value + "</option>");
		});
    // Show 2nd dropdown now
    $('#second-choice').show();
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="first-choice">
  <option selected disabled>----Please select an option----</option>
  <option value="beverages">Beverages</option>
  <option value="snacks">Snacks</option>
</select>

<select id="second-choice">
</select>

Answer 4

可以说您做的描述并不理想。用数据混淆HTML并不是最漂亮的解决方案。也就是说，解决方案是将JSON存储为JS对象：

<script>
data = {"myjson": "here"};
</script>

然后，脚本中的所有内容将保持不变，只是不再将代码包装在AJAX请求中。

如何内部使用JSON对象而不是HTML中的外部文件

4 个答案: