jQuery Ajax不使用ACF字段加载页面

Question

我使用以下jQuery代码在单击时将内容从模板部件加载到另一个模板部件。如果没有ACF PHP标记，它就能工作。但是，当我在中添加这些标记时，它会引发一个500 (内部服务器错误)错误。有人想办法解决这个问题吗？

    var baseUrl = "http://projectname:8888/wp-content/themes/custom-theme"

    $(".cross__functional").click(function (e) {
        e.preventDefault();
        console.log('cross functional Clicked')
        $("#keContent").load(baseUrl + "/template-parts/components/filename.php");
    });

Answer 1

您正在直接调用主题中的PHP文件，这就是您有问题的原因。因为WordPress没有处理请求，所以您的文件没有加载任何WordPress，也没有加载插件。这种方法还存在许多安全问题。

如果需要发出AJAX请求，请将其设置为REST端点。

例如，这里我注册了一个返回Hello World的端点：

add_action( 'rest_api_init', function () {
    register_rest_route( 'jeno/v1', '/helloworld/', [ 'callback' => 'helloworld' ] );
} );

function jeno_helloworld( $data ) {
    return "Hello World";
}

在将其放置在插件或functions.php中之后，我可以访问这个URL以获得响应：

http://example.com/wp-json/jeno/v1/helloworld

"Hello World"

下面是一段代码

jQuery.ajax({
    url: "https://example.com/wp-json/jeno/v1/helloworld"
}).done(function( data ) {
    // do something with data
    console.log( data ); // prints hello world in the dev tool console
});

如果需要任何参数，请使用$data变量。REST以JSON的形式返回它们的响应，因此您可以在javascript中解码JSON以获得更复杂的结果。