如何将数据加载到 JavaScript 对象中

Question

如何将数据加载到 JavaScript 对象中

3

我目前正在编写一个需要从服务器存储一些数据到Javascript对象的Web应用程序。需要加载的数据非常少，大约只有1KB。我面临的决定是如何将数据加载到应用程序中。以下是我可以采取的两个明显（至少对我来说）的方式：

1 - 使用jQuery的文档就绪函数，向服务器发出AJAX请求，并将响应存储在相应的Javascript对象中。可能会像这样：

$(function() {
    $.get('index.php?get=data', function(data) {
        myObj.addData(data);
    });
});

2 - 另一种方法是在初始页面请求时将数据与页面一起发送。为此，我将让我的服务器生成数据并在<script>标记之间输出它。由于我的当前项目是用PHP编写的，代码大致如下：

...
</div>
<script>
    window.myData = <?= json_encode($myData) ?>;
</script>
...

jQuery的document-ready函数稍后会寻找名为window.myData的全局变量，并将其加载到适当的JavaScript对象中，如下所示：

$(function() {
    myObj.addData(window.myData);
});

有没有一种首选的方式来将数据加载到JavaScript对象中？尽管存储的数据量相对较小，但如果服务器的ping不佳，则AJAX调用可能导致长时间等待。然而，当涉及这些事情时，使用AJAX调用似乎更受欢迎。这是否有一个有效的原因？

编辑：这些数据很少更改（可能每年只更改一次）。因此，浏览器缓存应该不是什么问题。

- James Hall

@ShivanRaptor 不，我相信 json_encode 是正确的函数。请注意，$myData 是 PHP 中的关联数组，应该转换为 Javascript 中的数组。因此，将其编码为 JSON 将提供 Javascript 可以理解的正确语法。 - James Hall

我更喜欢选项1：window.myData = <?= json_encode($myData) ?>; 主要是因为您在加载时已经有了数据，而不是在加载后获取数据。但是，如果数据像您所说的那样很小，那就没问题。 - deach

json_encode通常用于服务器端将请求数据编码为JavaScript对象表示法。jQuery会在请求后处理解码。json_decode将JSON对象转换为PHP数组，但不能直接在JavaScript中使用，需要手动解析。 - Hobbes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- liyakat · Accepted Answer

使用$.getJSON方法：

$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});

或者可以使用$.each()函数来循环遍历数据：

$.ajax({ 
    type: 'GET', 
    url: 'http://example/functions.php', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        $.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });
    }
});