jquery, ajax call inside a function: can't access a global variable passed as argument to outer function from ajax success

Question

I have a function with two parameters that I need to correctly make an ajax call and process the results, as this function is called two times and with different arguments.

我想要完成的是用从 Ajax 调用中获得的数据覆盖全局变量myArray 。

const api_url = 'some-url';
const api-key = 'some-key';
var myArray = [];

function doThis(endpoint, array) {
  $.ajax({
    'url': api_url + endpoint,
    'method': 'get',
    'data': {
      'api_key': api_key,
    },
    'success': function(data) {
      /*store data in global variable for later use*/
      array = data.keyname;
    },
    'error': function() {
      console.log('ajax error');
    },
  });
}

doThis(someEndpoint, myArray);

What the rest of the success function (not included) does is it uses the Handlebars.js library to print a few options in a select, so once that's been drawn correctly I am 100% sure that the Ajax call has returned.

我的印象是传递一个空数组作为参数将允许我使用 function 中的参数对空数组本身进行操作。 但是，如果即使在绘制 select 之后我尝试console.log(myArray) ，我仍然会留下一个空数组，我无法弄清楚为什么，因为分配发生在成功 function 中，一旦调用触发就会触发返回，所以这不应该是异步的问题。

我还尝试在 ajax 调用和外部 function 的末尾使用return array ，但这仍然没有效果。

Eta: data.keyname返回一个对象数组。

Answer 1

我怀疑您假设将值作为新数组分配给 function 内的参数将更新传递给 function 的变量的值。 不是这种情况。

而是将新数据推送到参数表示的数组引用中

简化示例：

 let myarr = []; function doStuff(arr) { arr = [1, 2, 3];// your approach that doesn't work } doStuff(myarr); console.log('After doStuff', myarr) function doStuff2(arr) { arr.push(...[1, 2, 3]);// update the array object instead } doStuff2(myarr); console.log('After doStuff2', myarr)

更现代的方法是返回 $.ajax promise

var myArray = [];

function doThis(endpoint) {
   return $.getJSON(api_url + endpoint, {api_key: api_key}); 
}

doThis(someEndpoint).then(data=>{
  // do stuff with data and also store in global
  myArray = data.keyname
});

Answer 2

1. 确保data.keyname有一些有效的东西
2. 您正在将数组分配给新的 object，因此参数array现在指向新的 object 并且myArray仍然位于[] 。 您可以传递一个 object ，其一个属性是一个数组，对象的数组键将指向您可以访问的新数组 - console.log(myObject.array); 这也需要在 Ajax 完成后完成，因为 ajax 调用异步 function

const api_url = 'some-url';
const api-key = 'some-key';
var myObject = {array:[]};

function doThis(endpoint, obj) {
  $.ajax({
    'url': api_url + endpoint,
    'method': 'get',
    'data': {
      'api_key': api_key,
    },
    'success': function(data) {
      /*store data in global variable for later use*/
      obj.array = data.keyname;
      success();
    },
    'error': function() {
      console.log('ajax error');
    },
  });
}

doThis(someEndpoint, myObject);



 function success(){
    console.log(myObject.array);    
}

Answer 3

您没有正确使用 Array。 Ajax 应返回 json 中的数据，您将其存储在某个变量中。 然后您再次解析并转换为数组，以防您需要它作为数组。 所以你应该在成功声明中使用 JSON.parse(data.keyname) 。 我假设数据以 json 格式出现。 在此处了解有关 JSON.parse 的更多信息https://www.w3schools.com/js/js_json_parse.asp