So I've been working on a custom theme I'm building, for which I'm trying to implement an AJAX powered search presentation. I have built everything according to several tutorials and guides, but when inspecting the call to admin-ajax, it keeps returning 400 errors ... I'm fresh out of ideas and was hoping someone could shed some light on the issue here.

functions.php

function load_search_results(){
$q = $_REQUEST['query'];
$post_type = $_REQUEST['post_type'];

$args = array(
    'post_type' => $post_type,
    'post_status' => 'publish',
    's' => $q,
);

$search = new WP_Query($args);

if ($search->have_posts()){
    echo json_encode('has posts');
} else {
    echo json_encode('no posts found');
}

wp_die();
}

add_action('wp_ajax_load_search_results', 'load_search_results');
add_action('wp_ajax_nopriv_load_search_results', 'load_search_results');

Enqueueing the scripts in functions.php as well

wp_register_script('ajax-search', THEME_DIR .'/assets/js/ajax/search.ajax.js', array('jquery'), '1.0', false);
wp_enqueue_script('ajax-search');
wp_localize_script('ajax-search', 'myAjax', array('ajax_url' =>admin_url('admin-ajax.php')));

search.ajax.js

(function($) {

$(document).on('submit', '.controls-search', function(){
    var $form = $(this);
    var $input = $form.find('input[name="s"]');
    var query = $input.val();
    var $content = $('.licence');

    $.ajax({
        type: 'POST',
        post_type: 'shuffle_licence',
        url: myAjax.ajax_url,
        data: {
            action: 'load_search_results',
            query: query
        },
        beforeSend: function(){
            $input.prop('disabled', true);
            $content.addClass('loading')
        },
        succes: function(response){
            $input.prop('disabled', false);
            $content.removeClass('loading');
            $content.html(response);
        },
        dataType: 'html',
        contentType: 'application/json',
    });

    return false;

});

}(jQuery))

So I've been working on a custom theme I'm building, for which I'm trying to implement an AJAX powered search presentation. I have built everything according to several tutorials and guides, but when inspecting the call to admin-ajax, it keeps returning 400 errors ... I'm fresh out of ideas and was hoping someone could shed some light on the issue here.

functions.php

function load_search_results(){
$q = $_REQUEST['query'];
$post_type = $_REQUEST['post_type'];

$args = array(
    'post_type' => $post_type,
    'post_status' => 'publish',
    's' => $q,
);

$search = new WP_Query($args);

if ($search->have_posts()){
    echo json_encode('has posts');
} else {
    echo json_encode('no posts found');
}

wp_die();
}

add_action('wp_ajax_load_search_results', 'load_search_results');
add_action('wp_ajax_nopriv_load_search_results', 'load_search_results');

Enqueueing the scripts in functions.php as well

wp_register_script('ajax-search', THEME_DIR .'/assets/js/ajax/search.ajax.js', array('jquery'), '1.0', false);
wp_enqueue_script('ajax-search');
wp_localize_script('ajax-search', 'myAjax', array('ajax_url' =>admin_url('admin-ajax.php')));

search.ajax.js

(function($) {

$(document).on('submit', '.controls-search', function(){
    var $form = $(this);
    var $input = $form.find('input[name="s"]');
    var query = $input.val();
    var $content = $('.licence');

    $.ajax({
        type: 'POST',
        post_type: 'shuffle_licence',
        url: myAjax.ajax_url,
        data: {
            action: 'load_search_results',
            query: query
        },
        beforeSend: function(){
            $input.prop('disabled', true);
            $content.addClass('loading')
        },
        succes: function(response){
            $input.prop('disabled', false);
            $content.removeClass('loading');
            $content.html(response);
        },
        dataType: 'html',
        contentType: 'application/json',
    });

    return false;

});

}(jQuery))

• ajax

• The post_type property of your AJAX request should be in data, otherwise $_REQUEST['post_type'] won’t be set. Also, this type of request should be GET, not POST. Only use POST for requests that have a ‘side effect’ like adding something to the database. You’re just retrieving data, so get is more appropriate. – Jacob Peattie Commented Mar 7, 2018 at 15:06

1 Answer 1

I figured it out. I deleted two lines:

dataType: 'html',
contentType: 'application/json'

When I deleted those, I got an 200 response with the appropriate response text.