Question

我正在尝试进行自定义字段搜索，可以插入应该在同一页面中加载结果的任何位置，所以我认为ajax会成为诀窍但是由于某些原因它再次加载同一页面是我的搜索模板代码：

<script>
    jQuery(document).ready(function($){
        $("#SearchButton").click(function(){
            $.ajax({
                type: "GET",
                ulr:'<?php echo admin_url('admin-ajax.php'); ?>',
                data: { action : 'inline_search', Sinput: $("#searchinput").val() },
                success: function(result) {
                    $("#SearchResults").html(result);
                }
            });
            $("#SearchResults").css("display","block")
        });
    });
</script>
<div class="flexible-content__content">
    <div class="column">
        <div class="row">
            <?php the_sub_field( 'content' ); ?>
        </div>
    </div>
    <div class="column">
        <div class="row">
                <input id="searchinput" type="text" value="<?= $search_query; ?>" name="s" id="header-search-input" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" style="border-right: none;">
                <bttuon id="SearchButton" class="gform_button button" value="Search">Search</bttuon>
        </div>
    </div>
</div>
<div id="SearchResults" style="max-width: 70rem; margin:auto;display:none"></div>

我把它添加到function.php：

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
    wp_localize_script( 'ajax-script', 'ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}

function inline_search()
{
    echo "hello world";
    get_template_part('templates/inline-search');
    wp_die();
}
add_action('wp_ajax_nopriv_inline_search', 'inline_search');
add_action('wp_ajax_inline_search', 'inline_search');

Answer 1

PHP部分就是这样。

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
    wp_register_script('ajax-script', SCRIPT_PATH, array('jquery'));
    wp_localize_script( 'ajax-script', 'ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    wp_enqueue_script('ajax-script');
}

function inline_search()
{
    echo "hello world";
    get_template_part('templates/inline-search');
    wp_die();
}
add_action('wp_ajax_nopriv_inline_search', 'inline_search');
add_action('wp_ajax_inline_search', 'inline_search');

然后在js中，您可以ajax_object访问ajax_object.we_value。使用ajax类型POST。

$.ajax({
                type: "POST",
                url: ajax_object.ajax_url,
                data: { action : 'inline_search', Sinput: $("#searchinput").val() },
                success: function(result) {
                    $("#SearchResults").html(result);
                }
            });

Answer 2

感谢@mokiSRB指出它，但整个问题是一个错字，我喂这么愚蠢。

更改ulr：到url修复它现在可以正常工作。

使用ajax获取模板

2 个答案: