javascript - 我怎样才能让这个函数返回使用 jQuery.ajax 检索到的值？

Question

我需要返回动态加载的内容。我认为这是这样做的方法，但该函数返回空白。我需要做什么才能使用从 jQuery.ajax 检索到的 html 代码设置 htmlCode？

  // Get directory listing
  function getHTML(instance, current_path, dir) {
    var htmlCode = '';

      jQuery.ajax({
          type: "POST",
          url: "../wp-content/plugins/wp-filebrowser/jquery.php",
          dataType: 'html',
          data: {instance: instance, current_path: current_path, dir: dir},
          success: function(html){
              htmlCode = html;
          },
          error: function(e) {
            htmlCode = '[Error] ' + e;
          }
      });

      return htmlCode;
  }

Answer 1

发生这种情况是因为 ajax 请求需要一些时间来获取 html，并且您的 return 语句在 html 准备好之前触发。 Javascript 代码执行不会等待您的 html 返回。您实际上可以通过删除返回并放置两个警报来看到这一点。在成功事件中放置一个 alert，在放置返回语句的位置放置一个。第二个 alert 会在之前发出警报。因此，即使您的 html 已被提取，它实际上也从未成功返回到调用函数，因为在 html 准备好时 return 语句已经触发。

如果您严格希望函数 getHtml() 返回(实际上是回调)html 作为输出，否则你可以使用尼克建议的方式。

这里是如何使用回调:-

function getHTML(instance, current_path, dir,callback) 
{
   var htmlCode = '';

  jQuery.ajax({
      type: "POST",
      url: "../wp-content/plugins/wp-filebrowser/jquery.php",
      dataType: 'html',
      data: {instance: instance, current_path: current_path, dir: dir},
      success: function(html){

         callback(html); //instead of a return

      },
      error: function(e) {
        htmlCode = '[Error] ' + e;
      }
  });

像这样调用函数 -

getHTML(instance, current_path, dir,
    function(html)
    {
        //Write code to use the html here - this will run when the getHTML() function does callback with the output html
    }
);

注意函数定义 getHTML(instance, current_path, dir,callback) 中的 callback 参数和被调用函数中相应的 function(html){} 部分。

这样，您实际上定义了:-

• 当输出就绪时回调调用函数的被调用函数
• 调用方函数在收到回调时执行某些操作。