javascript - 从 html 文件中引用 javascript 数组

Question

我有一个关于 ajax 数组的问题。我在如下所示的 javascript 文件中创建了两个数组。

$(document).ready(function () {
categoryarray = [];
productarray = [];

然后，如果我想从另一个 javascript 文件引用这些数组，html 中的脚本遵循创建两个数组的 javascript 文件的脚本，但它不显示任何内容，甚至不显示控制台报告错误。 下面是我在另一个 javascript 文件中引用数组的方式，它不起作用。

  $(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'my_script.js',
        success: function(data) {
            for(var k=0;k<categoryarray.length;k++){
                if(categoryarray[k][0]!==""){
                    $('.tree').append('<li id="Cate_' + k + '">'+categoryarray[k][1]+'</li>');
                    for(var l=0;l<productarray.length;l++){
                        if(categoryarray[k][0]==productarray[l][2]){
                            $('#Cate_' + k).append('<ul id="Pro_' + l + '"></ul>');
                            $('#Pro_' + l).append("<li>"+productarray[l][1]+"</li>");
                        }
                    }
                }
            }   
        },
        error: function() {
            $('.tree').text('Failed to load the data');
            console.log('Error');
        }
    });
}); 

谁能告诉我我做错了什么以及如何解决这些问题？非常感谢!!!

Answer 1

首先将您的代码放在一个您将在某些事件中调用的函数中。如果您想在 AJAX 调用后处理数组，请在 AJAX 成功后调用该函数。浏览器从上到下呈现 HTML，因此一旦浏览器碰到脚本，HTML 中的脚本就会运行。另一方面，jQuery on ready 会等到所有页面内容(所有图像、 Assets 等)完全加载 - 整个 DOM，因此您的数组将保持未定义状态。 您可以通过将该代码从 HTML 移动到 jQuery 就绪函数或通过移动 HTML 中的数组声明来修复它。 无论如何，如果 HTML 中的脚本应该在文档准备就绪时运行，那么将 JavaScript 代码从 HTML 移动到 jQuery 就绪函数更为合理。