如何从 wordpress ajax 搜索表单中获取数据？

Question

我的表单 html 代码，我在其中设置操作和属性名称。

<div class="search_form">
    <form action="<?php esc_url( home_url( '/' ) ); ?>" method="POST">
        <input type="text" name="s" value="<?php get_search_query(); ?>" placeholder="Search...">
        <input type="submit" value="Send">
    </form>
</div>

我使用本地化脚本连接 ajax-search。

    wp_enqueue_script( 'wc-estore-ajax-search-js', get_template_directory_uri() . '/assets/js/ajax-search.js', array( 'jquery' ), _S_VERSION, true );
    wp_localize_script( 'wc-estore-ajax-search-js', 'search_form', array(
        'url'   => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'search-nonce' )
    ) );

在 ajax-search 中得到 nonce，设置 action 并设置 url。

jQuery(function ($) {
    $('.search_form input[name="s"]').on('keyup', function () {
        let search = $('.search_form input[name="s"]').val();
        if (search.length < 4) {
            return false;
        }
        let data = {
            s: search,
            action: 'search_action',
            nonce: search_form.nonce

        };
        $.ajax({
            url: search_form.url,
            data: data,
            type: 'POST',
            dataType: 'json',
            beforeSend: function (xhr) {
            },
            success: function (data) {
                console.log(data);
            }
        });

    });
});

我想在functions.php 中查看$_POST 中的内容。 该操作与 search-ajax.js 中的操作相同。

add_action( 'wp_ajax_search_action', 'esp_search_ajax_action_callback' );
add_action( 'wp_ajax_nopriv_search_action', 'esp_search_ajax_action_callback' );
function esp_search_ajax_action_callback() {
    /**
     * Проверяем нонсе из массива пости и из wp_localize script
     */
    if(!wp_verify_nonce($_POST['nonce'], 'search-nonce')){
        wp_die('Данные пришли с левого адреса');
    }
    $_POST = filter_input_array( INPUT_POST, FILTER_SANITIZE_STRING );
    $args = [
        'post_type' => ['post', 'product'],
        'post_status' => 'public',
        's' => $_POST['s'],
    ];

    $query_ajax = new WP_Query($args);
    ?>
    <?php if($query_ajax->have_posts()): ?>
        <?php while($query_ajax->have_posts()): ?>
            <?php $query_ajax->the_post(); ?>
            <h3 class="title-search"><?php the_title(); ?></h3>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    <?php endif; ?>

<?php
}

但是控制台是清楚的吗？

我的错误在哪里？

感谢您的帮助。

Answer 1

看起来你有一些事情要做。试试这些：

• dataType 是您期望返回的数据类型。您没有传回有效的 JSON，因此它失败并出现解析错误（即没有成功，没有 console.log）。
• vardump 可能应该是 var_dump 除非你在别处定义了它。如果不是，那可能会导致错误并发回错误字符串（这又不是有效的 JSON）
• 虽然不一定是您要问的问题，但您也应该使用 wp_die(); 完成回调并传递您需要的任何参数。

如果您愿意，可以在测试时将dataType 切换为html。

您还可以添加错误（查看错误是什么）和完成（查看实际返回）回调。

为了安全起见，您可能希望使用以下内容过滤您的 $_POST 数据：

$_POST = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);

或任何适合您情况的过滤器。