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

How to Load Data into Javascript Objects

本文关键字：Javascript 对象 加载 数据      更新时间：2023-09-26

我目前正在编写一个web应用程序，该应用程序需要将服务器中的一些数据存储在Javascript对象中。需要加载的数据量非常小，可能在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文档就绪函数稍后将查找名为window.myData的全局变量，并将其加载到适当的Javascript对象中，如下所示：

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

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

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

使用$.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
            }));
        });
    }
});
相关文章：