在连续的 Ajax 函数中使用相同的变量答案

【问题标题】：Using same variable in successive Ajax functions在连续的 Ajax 函数中使用相同的变量
【发布时间】：2020-02-07 07:38:05
【问题描述】：

我在同一个脚本中有 2 个 ajax 函数，我希望第一个函数的结果由第二个函数收集并发送到正确的 URL，

这是我的代码：

    <!DOCTYPE html>
    <meta charset="utf-8"/>
    <html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url:"TEST_2.csv",
                    dataType:"text",
                    success:function(data)
                    {

                        var lines=data.split("\n");

                        var result = [];

                        // NOTE: If your columns contain commas in their values, you'll need
                        // to deal with those before doing the next step 
                        // (you might convert them to &&& or something, then covert them back later)
                        // jsfiddle showing the issue https://jsfiddle.net/

                        for(var i=0;i<lines.length;i++){

                                var obj = {};
                                var currentline=lines[i].split(",");

                                for(var j=0;j<currentline.length;j++){
                                    obj=currentline[j];
                                }

                                result.push(obj);

                        }

                        //return result; //JavaScript object
                        return result;
                    }
                });
                // Définition des paramètres et des entêtes de la requête avec l'identifiant de la liste dans l'URL
                    var listId = 261291 
                    settings = {
                        "async": true,
                        "crossDomain": true,
                        "url": 'https://www.kizeoforms.com/rest/v3/lists/'+listId,
                        "method": 'PUT',
                        "headers": {
                            'content-type': 'application/json',
                            Authorization: '*****',
                        },
                        // Ajout des données dans le corps de la requête
                        processData: false,
                        data: result,
                    }
                    $.ajax(settings).done(function(response) {
                            console.log(response)
                    })
            });
        </script>
   </html>

当我在浏览器上运行脚本时，控制台中出现此错误：

我看不到如何在“设置”变量的“数据”中传递“结果”变量的内容，然后将其传递给我的第二个 ajax 函数，

我对 ajax 很陌生，所以我可能在这里做错了，

谢谢，

【问题讨论】：

您好 JS1，欢迎来到社区！你为什么要进行 ajax 调用来读取 csv 文件？另外，为了确保第二个只在第一个完成后执行，也许你可以在 .done() 回调中运行它？
我向您发布了一种生成结果对象的方法，并在发送到 url 之前对其进行测试。告诉我我是否理解你，如果没有，我会更新它:-) BOL！

标签： javascript jquery ajax api request

【解决方案1】：

我认为您是在您的第一个代码块中从您的 csv 文件中构建一个 json 对象数组。这是一种更简单但有效的方法：
源答案在这里：convert CSV lines into Javascript objects

文件读取函数：

function loadFile(filePath) {
  var result = {};
  var items = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    items = xmlhttp.responseText;
  }
  result.items = items;
  return result;
}

你的第一个代码最终会是这样的：

    var csvString = loadFile("./TEST_2.csv");
    var arr = csvString.split('\n');     

    var items = {};
    var headers = arr[0].split(',');
    for(var i = 1; i < arr.length; i++) {
      var data = arr[i].split(',');
      var obj = {};
      for(var j = 0; j < data.length; j++) {
         obj[headers[j].trim()] = data[j].trim();
      }
      items.push(obj);
    }

    var result = {}
    result.items = items;
    console.log(JSON.stringify(result));

然后您可以检查对象是否正确构建并运行以下ajax PUT：

if (Array.isArray(result) && result.length) {
  var listId = 261291 
  settings = {
                "async": true,
                "crossDomain": true,
                "url": 'https://www.kizeoforms.com/rest/v3/lists/'+listId,
                "method": 'PUT',
                "headers": {
                  'content-type': 'application/json',
                  Authorization: '*****',
                  },
                processData: false,
                data: result,
               }

   $.ajax(settings).done(function(response) {
     console.log(response)
   });

}

【讨论】：

感谢您的回答，但它对我不起作用，它告诉“require”未定义
更新了它。你能检查一下是否适合你吗？我目前无法测试它，但我认为它会让你走上正确的道路。我认为初始代码的问题是 1）在使用它之前不检查结果是否存在，2）结果是在独立的 ajax 调用中声明的。
感谢帮助，我尝试直接使用你在fiddle中使用的bufferString所以我不需要使用require来查看是否有其他问题并且还有另一个错误，“jsonObj未定义”
尝试在设置中将 jsonObj 替换为结果，我将行固定在 asnwer:data: result,
谢谢，还有一个错误，我想这还不错，但我有“无法读取属性'split' of null”这一行“var arr = csvString.split('\n') ; "

【解决方案2】：

默认情况下，Ajax 使用 async=true 启动。第二个 ajax 调用，可以在第一个调用完成并且结果没有值之前进行。

例如，您可以将第一个 Ajax 调用标记为 syncronous 以等待结果填充

【讨论】：