时间戳

首页 > 解决方案 > 将 JSONP 响应返回到原始函数调用

javascript - 将 JSONP 响应返回到原始函数调用

问题描述

基本上，我正在尝试使用 JSONP 进行跨域 AJAX 调用。JS 和 PHP 文件需要位于不同的域中。我似乎无法将返回的数据恢复到原始函数。

解释页面是如何工作的。用户将在输入框中输入一些内容。例如姓氏。

输入和搜索。

用户单击搜索后，将调用 searchClick() 函数。此函数获取用户已插入输入框的文本并调用另一个名为 的函数getInfo()。

function searchClick() {
    var jsonOfData = getInfo($('#searchInput').val());
    console.log(jsonOfData );
}

该getInfo()函数必须位于不同域的 JS 文件中。

function getInfo(surname) {
$.ajax({
    url: "https://www.otherdomain.com/api/lookup.php",
    dataType: 'jsonp',
    crossDomain: true,
    data: {
        surname: surname
    },
    success: (data) => {
        console.log(data); // This works
        return data; // This doesn't
      }
  });
}

这个 ajax 调用转到我的 PHP 页面并在数据库上进行搜索。然后它创建了一个 JSON 数组并将其发回。根据我的研究，我没有以通常的方式结束文件，而是以以下方式echo json_encode($array);结束文件：

echo $_GET['callback'] . "(" . json_encode($responseArr) . ")";

这就是我遇到问题的地方。如您所见，在 AJAX 成功函数中，数据已成功显示并记录到控制台，但我无法将其返回到原始jsonOfData变量。

我希望这是有道理的，我会非常感谢任何可以帮助我的人。

标签： javascriptphphtmljsonajax

解决方案

您尝试执行的操作将不起作用，因为$.ajax调用是异步进行的。

此时不要使用函数调用的返回：

var jsonOfData = getInfo($('#searchInput').val());

尝试在调用success函数中构建逻辑$.ajax。

推荐阅读