调用异步请求加载信息答案

【问题标题】：Call async request to load info调用异步请求加载信息
【发布时间】：2015-09-11 22:33:34
【问题描述】：

在我的 wordpress 主题中，我使用 api 加载电影信息。因此，我正在尝试调用 jquery 函数，该函数将执行 ajax 请求并将结果加载到预定义的 DIV 中。

但当我在 content.php 页面中调用该函数时，document.ready 尚未完成。所以，要么我需要在 document.ready() 之外定义 jquery 函数（我认为这不是一个好主意），要么我需要在 bodyOnload 上调用该函数。在后一种情况下，我不确定如何从页面内容中包含使用 wordpress 的 get_the_content() 函数解析的 url。

谁能给点建议。

PHP（内容.php）：

$pattern = '/REGEX/i';
$replacement = '$1';
$subject = get_the_content();
$urls = preg_split($pattern, $subject); // Let say I have all the links in this variable
echo '<script>loadMovies('.json_encode($urls).');</script>'; // loadMovies() is not available at this point

现在 loadMovies() 在 custom.js 中定义，如下所示

jQuery(document).ready(function () {
    "use strict";
    function loadMovies(urls){
        console.log(urls);
        // HERE I HAVE MY AJAX CALLS WHICH IS NOT AN ISSUE
        // THE MAIN ISSUE IS THE FUNCTION IS NOT AVAILABLE AT THE POINT I CALL IT
    }
});

custom.js 使用下面的 functions.php 添加

function test_call_js(){
    wp_enqueue_script(
        'custom-js',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' )
    ); 
}

add_action('wp_enqueue_scripts', 'test_call_js');

【问题讨论】：

为什么不能在页面末尾（即脚本加载后）运行函数？
问题是，这个页面使用了一个特殊的模板，比如说card-view.php。在这个模板文件中，我调用 content.php（使用 get_template_part('content');），它定义了正文部分。所以，如果我在 card-view.php 的末尾调用 loadMovies，由于某种原因，变量 $urls 不可用。（与 PHP 不同，如果我在 card-view.php 中包含 content.php，我可以访问前者的所有变量）。

标签： javascript php jquery ajax wordpress

【解决方案1】：

您遇到了范围问题。您在另一个函数中声明该函数，这意味着当您添加脚本时，它在全局范围内不可见。您需要在全局范围内移动将从其他脚本调用的函数。

AJAX 调用仍然可以放置在 ready 事件中，因此它会在 DOM 准备好后加载脚本。

【讨论】：

那么你是不是建议我把 loadMovies 放在 doc.ready 之外，然后调用另一个函数 callAjax() 我应该把它放在 doc.ready 里面？
是的，没错。实际上，您可以在准备好的处理程序之外拥有函数上的所有内容，只需从处理程序内部调用该函数。但是，我觉得奇怪的是，应该从导入的脚本 AJAX 调用的函数再次调用脚本，以便它可以再次调用该函数。这是一个循环。
它给出了错误（我相信这是合乎逻辑的）。因为现在 loadMovies() 被正确调用了，但是当你调用 callAjax() 时在 loadMovies() 内部，它还不可用（因为 dom 还没有准备好）。我相信这不是范围问题，而只是我在 DOM 准备好之前调用函数，但希望被调用的函数在 DOM 准备好之后开始工作。
不。 content.php 是我的主页。我调用彻底 ajax 的函数是在 function.php 中定义的。基本上来自 content.php，我只是调用一个 JS 函数，它在 tern 中发出 ajax 请求。看，基本上我从 content.php 中调用了 loadMovies()。 loadMovies() 函数应该发出一些 Ajax 请求。但我不能冒险在加载 dom 之前发出 ajax 请求。这就是两难境地。
您可以从 loadMovies () 调用中添加另一个就绪处理程序。

【解决方案2】：

就像负 4 所述，这是一个时间问题。您正在调用一个仅在 dom 就绪时创建的函数。解决方案是在 dom 就绪时调用 ajax 函数，并在脚本的前面（调用 ajax 函数的位置）输出此函数所需的变量

即内容.php

    $urls = preg_split($pattern, $subject); // Let say I have all the links in this variable
    echo '<script> var urls='.json_encode($urls).';</script>';

请注意，您所做的只是在此处定义 url，这是不好的标记，但它需要在这里，因为您使用的是 the_content()，它需要在 wp 循环中运行。

在你的 js 文件中

    function loadMovies(urls){
        console.log(urls);
        // define our function.
    }

    jQuery(document).ready(function () {

        loadMovies(urls){
            console.log(urls);
            // call our predefined function
        }
    });

你仍然可以在你的 document.ready 函数中定义你的函数，但是它更简洁地创建函数然后在其他函数中调用（在上面的例子中它是一个匿名函数）

【讨论】：