如何使用 javascript / jQuery 获取数据 ajax api 数组？

Posted 2023-05-08

【中文标题】如何使用 javascript / jQuery 获取数据 ajax api 数组？

【英文标题】：how get data ajax api array using javascript / jQuery?

【发布时间】：2021-10-14 21:36:03

【问题描述】：

如何使用 javascript 从列表 api 获取数据？我有列表使用 json 数据的 api .. 但是当我从列表一中获取数据时我被卡住了。这个案子我该怎么办？

  "idMaster": "10",
  "data": [
    
      "id": "20",
      "rateBPK": 3,
      "updatedBy": "System"
    ,
    
      "id": "30",
      "rateBPK": 4,
      "updatedBy": "System"
    
  ]

这是我的代码，但我无法返回数据

var dataBKP;

$.ajax(
  type: 'POST',
  dataType: 'json',
  contentType: "application/json",
  cache: false,
  url: '@Url.Action("GetBpkOtrAsync", "SimulasiKredit")',
  data: JSON.stringify(param),
  success: function (Data, textStatus, jqXHR) 
     $.each(Data.data, function (i, rowData) 
        dataBKP = Number(rowData.rateBPK);
     );
  ,
return dataBKP;
);

【参考方案1】：

首先，您的代码底部附近似乎存在一些语法错误。我认为您没有关闭 $.ajax() 调用，也没有关闭其中的对象。

其次，您似乎试图在成功函数触发之后返回dataBKP，但是您已经在成功函数之外编写了它。

成功回调异步运行，因此在 ajax 完成之后。在大多数情况下，这里的return 语句将在成功有机会运行之前触发。

解决方案是将其移至成功函数中：

var dataBKP;

$.ajax(
    type: 'POST',
    dataType: 'json',
    contentType: "application/json",
    cache: false,
    url: '@Url.Action("GetBpkOtrAsync", "SimulasiKredit")',
    data: JSON.stringify(param),
    success: function (Data, textStatus, jqXHR) 
        $.each(Data.data, function (i, rowData) 
            dataBKP = Number(rowData.rateBPK);
        );
        return dataBKP;
    
);

如果您在嵌套组件中添加间距，您可能会发现更容易跟踪您已关闭的函数，因此您不会在末尾得到);。

最后，您正在对数据运行 .each 循环，但每次传递都会覆盖 dataBKP var。我会推荐连接、求和或推入数组。 （例如dataBKP = dataBKP + Number(rowData.rateBPK);）。

编辑：在看到您进行了一些更改后，我猜您的帖子仍在不断变化。如果是这样，那么您可能已经知道我在上面列出的所有内容，并且您正在尝试纠正它们。在这种情况下，我想补充一点，您可能会遇到几件事：

首先，您要返回 dataBKP var，而不是 使用 它。这是一个令人困惑的话题，因为它们是异步加载的，但您可能会将其归还到无处。成功函数是一个无效函数。相反，请尝试记录成功函数，以便稍后看到它出现并了解其工作原理。

接下来，设置的 dataBKP 将因为范围而难以使用。

添加一个成功操作可以调用的函数，以便您的代码可以使用 dataBKP var。然后，考虑将其传入，以便以后可以重用该函数。然后传递值，而不是直接调用变量。像这样：

var dataBKP = 0;

var functionToManipulateThatDataAfterAjaxCall = function(data) 
    // do something with your data here
    console.log("Called from within the success callback: " + dataBKP);
;

console.log("Just before the success callback: " + dataBKP);

$.ajax(
    type: 'POST',
    dataType: 'json',
    contentType: "application/json",
    cache: false,
    url: '@Url.Action("GetBpkOtrAsync", "SimulasiKredit")',
    data: JSON.stringify(param),
    success: function (Data, textStatus, jqXHR) 
        $.each(Data.data, function (i, rowData) 
            dataBKP = Number(rowData.rateBPK);
        );
        console.log("Inside the success callback: " + dataBKP);
        functionToManipulateThatDataAfterAjaxCall(dataBKP);
    
);
console.log("Just after the success callback: " + dataBKP);

【讨论】：

非常感谢您的回答。它非常有用。我真的很感谢你的回答。愿上帝保佑你