使用ajax获取模板

Question

I am trying to make a customfield search that can be inserted anywhere it should load the results in the same page so i thought ajax would be the trick but it's loading the same page again for some reason here is my search template code:

<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>

and i added this to 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

The PHP part would be like this.

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');

Then in js, you have access to ajax_object like ajax_object.we_value. Use ajax type POST.

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