Question

我目前正在编写一个Web应用程序，它要求服务器中的一些数据存储在Javascript对象中。需要加载的数据量非常小，可能大约为1 KB。我面临着如何将数据加载到应用程序中的决定。以下是我可以采用的两个明显的（对我而言）路径：

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文档就绪函数稍后会查找名为window.myData的全局变量，并将其加载到相应的Javascript对象中，如下所示：

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

是否有将数据加载到Javascript对象的首选方法？虽然存储的数据量相对较小，但如果服务器的ping不是很好，则AJAX调用可能会导致等待时间更长。但是，当谈到这些事情时，似乎AJAX调用更受欢迎。有正当理由吗？

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

Answer 1

使用$ .getJSON方法：

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

OR可以使用$.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
            }));
        });
    }
});

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

1 个答案: