Question

点击功能

$(".action-open-instruction-confirm").on("click",
    function(event) {

        var applicationNumber = $('.case-application-number').val();

        getInstructionType(applicationNumber, function(data) {
            $("#InstructionConfirm #instruction-confirm-instruction-type").html(data);
        });
    });

端点功能

function getInstructionType(applicationNumber) {
        if (window.location.port !== "") {
            port = ":" + window.location.port;
        } else {
            return null;
        }
        var url = window.location.protocol +
            "//" +
            window.location.hostname +
            port +
            "-apiEndpoint-?applicationNumber=" +
            applicationNumber;

        $.get(url,
            function(data) {
                return data; //<-- Change this to $("#InstructionConfirm #instruction-confirm-instruction-type").html(data); and it works correctly
            });
    }

HTML

<div id="InstructionConfirm">
    <span id="instruction-confirm-instruction-type"></span>
</div>

我具有以上两个功能，试图用来更改HTML中存在的## instruction-confirm-instruction-type元素的HTML。问题在于，目前回调函数似乎无法正常运行。

按一下功能将applicationNumber传递给getInstructionType函数，然后调用API端点。该端点正常工作，并且没有问题地返回数据。但是，然后，我的return data;函数中的getInstructionType行似乎没有正确返回数据，因为单击时的回调函数从未执行过。

我知道回调未在执行，因为它不会触发$("#InstructionConfirm #instruction-confirm-instruction-type").html(data);行上的断点。

如果我然后将第二个函数中的return data;行替换为$("#InstructionConfirm #instruction-confirm-instruction-type").html(data);，那么我会得到预期的行为而不会出现问题。

究竟是什么阻止getInstructionType将数据返回到我的回调函数中以便在单击函数中使用？

Answer 1

问题是因为您对提供的回调不做任何事情。您没有在函数定义中为其创建参数，也没有从$.get()调用它。试试这个：

$(".action-open-instruction-confirm").on("click", function(e) {
  var applicationNumber = $('.case-application-number').val();

  getInstructionType(applicationNumber, function(data) {
    $("#InstructionConfirm #instruction-confirm-instruction-type").html(data);
  });
});

function getInstructionType(applicationNumber, callback) { // accept the 'callback' argument
  if (window.location.port !== "") {
    port = ":" + window.location.port;
  } else {
    return null;
  }

  var url = window.location.protocol + "//" + window.location.hostname + port + "-apiEndpoint-?applicationNumber=" + applicationNumber;
  $.get(url, callback); // invoke the callback when $.get receives data
}

还请注意，您可以只使用location.origin而不是手动构建协议/域/端口字符串：

var url = window.location.origin + "-apiEndpoint-?applicationNumber=" + applicationNumber;

尽管看起来您可能在端口后缺少/，因为您的URL当前将在端口后包含看起来不正确的字符串。

Answer 2

您的函数没有用于回调的参数：

function getInstructionType(applicationNumber) {

应为：

function getInstructionType(applicationNumber, callback) {

然后您可以添加回调

$.get(url,
      function(data) {
         if ($.isFunction(callback))
             callback(data);
      });

甚至只是：

$.get(url, callback)

您可能希望考虑使用Promise，例如：

$(".action-open-instruction-confirm").on("click",
  function(event) {
    var applicationNumber = $('.case-application-number').val();
    getInstructionType(applicationNumber).done(function(data) {
        $("#InstructionConfirm #instruction-confirm-instruction-type").html(data);
    });
});

function getInstructionType(applicationNumber) {
    ....  
    return $.get(url);

函数从API端点返回数据后，回调函数未接收到数据

2 个答案: