javascript - jquery get() url作为变量的解决方法

Question

好的，所以我遇到的问题是我正在使用的 jquery get() 没有使用我想要的变量。这是代码，我将进行更深入的解释。

 jQuery(document).ready(function() {

        $.ajax({
            type: "GET",
            url: "XTEST.xml",
            dataType: "xml",
            success: function(xml) {
                    console.log(xml);
                    $(xml).find('Chart').each(function(){
                        chType = $(this).find('chType').text();
                        chTitle = $(this).find('chTitle').text();
                        chSubtitle = $(this).find('chSubtitle').text();
                        yAxisTitle = $(this).find('yAxisTitle').text();
                        csv = $(this).find('csv').text();
                    });
                    $(xml).find('columns').each(function(){
                        countArray[i] = 0;
                        cNum = parseInt($(this).find('cNum').text());
                        cNumArray.push(cNum);
                        value = $(this).find('value').text();
                        valueArray.push(value);
                        vName = $(this).find('vName').text();
                        vNameArray.push(vName);
                        i++;
                    });
                },
            error: function(){
                    $('.XTEST').text('Failed to get feed');
                }
            });

        // JQuery function to process the csv data
        $.get(csv, function(data) {
           // Split the lines
            var lines = data.split('\n');

在 get() 中，我试图给它一个名为“csv”的变量。目的是 csv 文件名将来自单独的 XML 文件。尽管 chType、chTitle、chSubtitle 等都按我希望的方式工作，但我在搜索 XML 中的“图表”部分时创建的“csv”变量却不是。 get() 中的 csv 显示为未声明。经过进一步调查，get() 似乎想要使用全局变量。如果您创建一个名为“csv”的全局变量，它将使用它。这似乎不是范围问题，因为我可以在 get() 之内和之外使用带有来自 XML 的数据的变量。它似乎是 get() 行本身的一个特征。有什么解决办法吗，或者我可能完全遗漏了什么？

Answer 1

这是一个范围问题。变量 chType、csv 不是本地的。如果你给一个没有声明的变量赋值，它会自动成为一个全局变量。因此，它们在执行 success 回调期间自动创建为全局。在该回调之前，它们是未定义的。请注意，此回调是在调用 $.get() 之后异步触发的。顺便说一下，一旦请求完成，get 中的回调也会被异步触发。你不知道那些请求回调的调用顺序。

考虑这个例子:

$.ajax({
           type: "GET",
           url: "XTEST.xml",
           //...
           success: function(xml) {
               console.log(xml);
               $(xml).find('Chart').each(function(){
                   chType = $(this).find('chType').text();
                   csv = $(this).find('csv').text();

                   // Automatic global variable 'csv' is defined.
                   console.log("3 csv: " + (typeof csv !== 'undefined').toString());

               });
               //...
           },
           //...
       });

// Variables 'csv' and 'chType' are not defined here.
console.log("1 csv: " + (typeof csv !== 'undefined').toString());
console.log("1 chType: " + (typeof chType !== 'undefined').toString());

// JQuery function to process the csv data
$.get('request2', function(data) {
    // Automatic global variables 'csv' and 'chType'
    // may be defined here. They are defined here only
    // if "XTEST.xml" request is already finished successfully.
    console.log("4 csv: " + (typeof csv !== 'undefined').toString());
});

console.log("2 csv: " + (typeof csv !== 'undefined').toString());

此处，当行 1 csv: 被打印时，变量 csv 未定义。它可以在 get 回调内部定义。控制台打印的顺序:1、2、3 或 4。

为避免此类混淆，局部变量应使用 var 关键字声明。

如果您想为 xml 中的每个 csv 项创建获取请求，您应该在 .each()回调。请注意，在这种情况下，所有 get 回调都将在 each() 循环完成后触发。因此，在所有这些 get 回调中，如果变量是全局变量，则外部变量(如 chType)的值将与最后一个循环步骤中的赋值相同。但是，如果您在 .each() 回调 function(){ var chType = ... } 中将它们声明为本地，它们的值将对应于 .get() 回调，请参阅闭包说明 JavaScript closure inside loops – simple practical example