使用AJAX重新加载.twig模板

我与树枝/木材一起使用。它工作得很好，但是，我意识到每当我到达一个新页面时，我的if子句都不起作用，因为SWUP无法从我的小树枝文件中读取if参数。（这是一个动态加载页面的JS库）

例如：

{% if fn('is_single') %}
<div class="progress"></div>
{% endif %}

它被包装在一个事件监听器中，每当我点击一个链接时就会触发

WP函数如下所示：

function swupReplaceHeader() {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'spx_replace_header',
        },
        success: function (output) {
            console.log(output);
        }
    });
}

swupReplaceHeader();
document.addEventListener('swup:clickLink', swupReplaceHeader);

add_action('wp_ajax_spx_replace_header', 'spx_replace_header');
add_action('wp_ajax_nopriv_spx_replace_header', 'spx_replace_header');
function spx_replace_header()
{
    $context = Timber::get_context();
    Timber::render('templates/header.twig', $context);
    wp_send_json_success(['AJAX is working']);
}

我添加了sendjson消息来测试我的AJAX调用是否有效

现在，每当我在没有Timber代码的情况下测试AJAX调用时，它都在工作，但是当我向函数添加两行Timber代码时，什么都没有发生——甚至JSON消息也没有出现。我也试过了，但运气不好

我希望有人能帮助我

最好的，

---

丹尼斯

回答由aj adl发布在：

嘿，丹尼斯

您正在调用wp admin/admin-ajax.php，因此像is_ajax（）这样的条件将返回true，但is_single（）肯定不会

请记住，PHP会在每个请求结束时关闭，丢弃状态等，因此对admin-ajax.PHP脚本的调用是一个与交付页面初始标记的过程完全隔离的过程，并且不知道从哪个页面调用它

因此，您可能希望传入条件语句所需的任何数据，可能是作为查询字符串参数

PHP:

JS:

细枝：

{%embed“objects/header.twig”和{'hamburger'：'hamburger--spring'}%}
{%endembed%}
{%if type=='单个'%}
{%endif%}
{%embed“objects/header.twig”和{'id'：'--sticky'，'hamburger'：'hamburger--spring'}%}
{%endembed%}

嗨，Dennis，这不是一个真正的木材问题，它似乎源于对AJAX如何工作以及客户端和服务器的责任的误解。如果您试图实现一个进度加载条，那么您应该在swup容器之外的客户端执行该操作，以便它在请求之间保持不变。

add_action('wp_ajax_nopriv_spx_replace_header', 'spx_replace_header');

function spx_safe_get_string( $key )
{
    if ( ! isset( $_GET[ $key ] ) ) return '';
   return sanitize_text_field( $_GET[ $key ] );
}

function spx_replace_header()
{
    $context = Timber::get_context();
    // Set this in the context, so we can access it in our twig file easily
    $context[ 'type' ] = spx_safe_get( 'my_page_type' );
    Timber::render('templates/header.twig', $context);
}

window.addEventListener('load', function() {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'spx_replace_header',
            my_page_type: 'single',
        },
        success: function (data) {
            console.log(data);
        }
    });
})

{% embed "objects/header.twig" with {'hamburger': 'hamburger--spring'} %}
{% endembed %}

{% if type == 'single' %}
    <div class="progress"></div>
{% endif %}

{% embed "objects/header.twig" with {'id': '--sticky', 'hamburger': 'hamburger--spring'} %}
{% endembed %}