Question

我试图通过jQuery使用Ajax同步加载脚本中的对象。

在这个脚本中，我试图从名为map_dropdowns.js的脚本中加载一个看起来像这样的对象，该脚本返回对象options：

{curr_cat: "RELATIONSHIP"
curr_subcat: "  Population in households"
curr_total: "Total"}

我的ajax脚本代码在这里：

<script>
    $.ajax({
        type: "GET",
        url: "../scripts/map_dropdowns.js",
        dataType: "script",
        async: false,
        success: function(data){
            console.log(data);
        }
    });

    console.log(options); //returns `Object{}` in the console, and only shows values when expanded
    options["curr_cat"]; //returns undefined
    console.log(Object.keys(options)); //returns an empty array []

</script>

在原始脚本中，options中的键和值可以完全正常访问。 Chrome中的console.log完全展示其内容，无需展开（Object {curr_cat: "RELATIONSHIP", curr_subcat: " Population in households", curr_total: "Total"}），Object.keys()也可以正常使用。

然后，使用Ajax函数将其加载到页面上后，尝试使用键访问值undefined，Object.keys将出现一个空数组[]和关键字：值对仅在我单击对象时显示在控制台中，否则仅显示Object {}。

我很确定我需要在Ajax的success函数中执行某些操作，但我不确定在经过多次试验和错误后会发生什么。

谢谢！

Answer 1

通过AJAX加载JS代码总是有点受欢迎。将数据加载为HTML，XML或JSON通常更好，然后在AJAX请求完成后根据需要处理它。

在您的情况下，当您尝试加载对象时，JSON将是最合适的。如果您更改map_dropdowns.js文件以此格式返回数据：

'{"curr_cat":"RELATIONSHIP","curr_subcat":"Population in households","curr_total":"Total"}'

然后，您可以发出异步请求以从此文件中获取此信息：

$.ajax({
    type: "GET",
    url: "../scripts/map_dropdowns.js",
    dataType: "json",
    success: function(data){
        console.log(data.curr_cat); // = 'RELATIONSHIP'
        console.log(data.curr_subcat); // = 'Population in households'
        console.log(data.curr_total); // = 'Total'
    }
});

从JS脚本中提取对象，该脚本加载了同步jQuery ajax调用

1 个答案: