Ошибка ajax 400

and thank you in advance for helping me.

I’m trying to make a POST where I pass the TOKEN in the URL and I want to pass another param too so I can save the info in the DB. I have this:

    $("#btnAddCompany").click(function(e) {
    var token = "123";
    var companyValue = document.getElementById("companyValue").value;
    var obj ={CompanyId: 4 ,Name: companyValue }
    var postData = JSON.stringify(obj);
    console.log(postData);
      $.ajax({  
        type: "POST", //REQUEST TYPE
        dataType: "json", //RESPONSE TYPE
        contentType: "application/json",
        data: postData,
        url: "http://banametric.ddns.net/BanaMetricWebServices/BanaSov_WS.svc/CompanySave/"+token, 
        success: function(data) {
            toastr.success("Lidl Adicionado!");
        },
        error: function(err) {
            console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
        }
    }).always(function(jqXHR, textStatus) {
        if (textStatus != "success") {
            alert("Error: " + jqXHR.statusText);
        }
    })
});

But I’m getting an 400 error (Bad Request) so I assume that I’m making something wrong, but I don’t find out what. The error trace is this:

AJAX error in request: { «readyState»: 4, «responseText»: «rn

The server encountered an error processing the request. The
exception message is ‘The incoming message has an unexpected message
format ‘Raw’. The expected message formats for the operation are
‘Xml’, ‘Json’. This can be because a WebContentTypeMapper has not been
configured on the binding. See server logs for more
details. The exception stack trace is:

rn

at
System.ServiceModel.Dispatcher.DemultiplexingDispatchMessageFormatter.DeserializeRequest(Message
message, Object[] parameters)rn at

I have been delving into AJAX within WordPress and have followed many tutorials on how to do so, but every single request returns a 400 error.

In my functions.php I have added the following:

Step 1 — Register and add scripts to WordPress

/**
 * Initialize the JavaScript we need for loading more
 *
 * @return void
 */
function ajax_load_more_init()
{
    // Register and enqueue the script we need for load more
    wp_register_script('ajax-load-more-script', get_template_directory_uri() . '/assets/scripts/ajax-load-more.js', array('jquery'));
    wp_enqueue_script('ajax-load-more-script');

    // Localize the script so we can access tthe variables in PHP
    wp_localize_script('ajax-load-more-script', 'ajax_load_more_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}

Step 2 — Enqueue the actual script

/**
 * Add AJAX loader to scripts
 */
add_action('wp_enqueue_scripts', 'ajax_load_more_init');

Step 3 — Allow AJAX to be used on the frontend

// AJAX Hook for users
add_action('wp_ajax_ajax_load_more', 'ajax_load_more');
add_action('wp_ajax_nopriv_ajax_load_more', 'ajax_load_more');

Step 4 — A dead simple function for testing

/**
 * The backend PHP to actually load more posts
 *
 * @return void
 */
function ajax_load_more()
{
    echo "TESTING";

    wp_die();
}

In my actual AJAX script I have the following:

jQuery(document).ready(function ($) {

  // Initialize Isotope as $grid
  const $grid = $('#grid').isotope({
    itemSelector: '.grid-item',
    percentagePosition: true,
    animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
    animationOptions: {
      duration: 800,
    },
    masonry: {
      columnWidth: '.grid-item',
      gutter: 30,
    },
  })


  var has_run = false;
  var init_offset = 0;

  // Hook into click event
  $('button.load-more-posts').click(function (e) {
    e.preventDefault();

    var button = $(this);
    var nonce = $(this).data("nonce");

    console.log('Nonce is: ' + nonce);

    // Disable the button
    button.prop("disabled", true);

    // Check the offset
    if (has_run == false) {
      button.data('offset', $(this).data("offset"));
      init_offset = $(this).data("offset");
    }

    console.log('Initial offset is: ' + init_offset);
    console.log('Initial offset is: ' + button.data('offset'));

    // Perform AJAX request
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: ajax_load_more_object.ajax_url,
      contentType: 'application/json; charset=utf-8',
      data: {
        action: 'ajax_load_more',
        security: nonce,
        init_offset: init_offset,
        offset: button.data('offset'),
      },
      beforeSend: function (xhr) {
        console.log('Loading more posts...')
        button.text('Loading');
      },
      success: function (response) {
        console.log(response);

        // Undo Button Disable
        button.prop("disabled", false);

        // Set Offset
        button.data("offset", offset + 10);

        // Script has run
        has_run = true;

        return false;
      },
      error: function (xhr, status, error) {
        console.log(xhr.responseText);
      }
    });
  });
});

As you can see in the $ajax call, the url is to admin-ajax and the action is the trailing part of wp_ajax_nopriv_ajax_load_more.

The nonce comes from the button on the front end like so:

<button class="load-more-posts" data-nonce="<?php echo wp_create_nonce('load_more_ajax'); ?>" data-offset="10">Load More Posts</button>

My working code

So, thanks to everyone’s shared input I was able to come up with a solution that I’ll detail below:

In functions.php (should really be in a plugin)

/**
 * Additional thumbnail sizes
 */
add_theme_support('post-thumbnails');
add_image_size('post-thumbnail-square', 300, 300, true);

/**
 * Initialize the JavaScript we need for loading more
 *
 * @return void
 */
function ajax_load_more_init()
{
    // Register and enqueue the script we need for load more
    wp_register_script('ajax-load-more-script', get_template_directory_uri() . '/assets/scripts/ajax-load-more.js', array('jquery'));
    wp_enqueue_script('ajax-load-more-script');

    // Localize the script so we can access tthe variables in PHP
    wp_localize_script('ajax-load-more-script', 'ajax_load_more_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}

/**
 * Add AJAX loader to scripts
 */
add_action('wp_enqueue_scripts', 'ajax_load_more_init');

/**
 * Allow AJAX to be used on the front end
 */
add_action('wp_ajax_ajax_load_more_posts', 'ajax_load_more_posts_callback');
add_action('wp_ajax_nopriv_ajax_load_more_posts', 'ajax_load_more_posts_callback');

/**
 * The backend PHP to actually load more posts
 *
 * @return void
 */
function ajax_load_more_posts_callback()
{
    // First check the nonce, if it fails the function will break
    check_ajax_referer('ajax_load_more_posts', 'security');

    // Get the data we have from the load more button
    $offset = $_POST['offset'];
    $init_offset = $_POST['init_offset'];

    // Get posts with given offset
    if ($offset != null && absint($offset) && $init_offset != null && absint($init_offset)) {
        // Finally, we'll set the query arguments and instantiate WP_Query
        $args = array(
            'post_type' => 'post',
            'posts_per_page' =>  $init_offset,
            'offset' => $offset
        );

        $post_list = array();

        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();

                //$categories = get_the_categories();

                $post_list[] = array(
                    'category' => get_the_category(),
                    'title' => get_the_title(),
                    'introduction' => get_field('introduction'),
                    'date' => get_the_date(),
                    'permalink' => get_permalink(),
                    'thumbnail' => get_the_post_thumbnail(),

                );
            endwhile;
        endif;

        echo json_encode($post_list);

        wp_die();
    }
}

In my ajax-loader script

jQuery(document).ready(function ($) {

  var has_run = false;
  var init_offset = 0;

  // Hook into click event
  $('button.load-more-posts').click(function (e) {

    var $grid = $('#grid').isotope({
      itemSelector: '.grid-item',
    });

    e.preventDefault();

    var button = $(this);
    var nonce = $(this).data("nonce");

    // Disable the button
    button.prop("disabled", true);

    // Check the offset
    if (has_run == false) {
      button.data('offset', $(this).data("offset"));
      init_offset = $(this).data("offset");
    }

    // Perform AJAX request
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: ajax_load_more_object.ajax_url,
      data: {
        action: 'ajax_load_more_posts',
        security: nonce,
        init_offset: init_offset,
        offset: button.data('offset'),
      },
      beforeSend: function (xhr) {
        console.log('Loading more posts...')
        button.text('Loading');
      },
      success: function (response) {
        console.log(response);
        button.text('Load more');

        // An array to store new items added via AJAX
        var new_items = [];

        // Run through JSON
        $.each(response, function (key, value) {

          var $new_item = $(`<div class="grid-item article-post-card ${value.category[0]['slug']}">
                                <a class="article-post-card__anchor" href=" ${value.permalink}" alt="${value.title}">
                                     <div class="article-post-card__featured-image-container">
                                        <div class="article-post-card__overlay"></div>
                                        <div class="article-post-card__featured-image">
                                            ${value.thumbnail}
                                        </div>

                                        <div class="article-post-card__category-label">
                                            ${value.category[0]['name']}
                                        </div>

                                    </div>

                                     <div class="article-post-card__content-wrapper">

                                        <div class="article-post-card__publish-date">
                                            <time class="updated" datetime="">${value.date}</time>
                                        </div>

                                        <div class="article-post-card__title">
                                            ${value.title}
                                        </div>

                                        <div class="article-post-card__excerpt">
                                          ${value.introduction}
                                        </div>

                                    </div>
                                </a>
                            </div>`);

          new_items.push($new_item[0]);
        });

        // Add the new items to the grid
        $grid
          .isotope('insert', new_items)
          .imagesLoaded().progress(function () {
            $grid.isotope('layout');
          });

        // Undo Button Disable
        button.prop("disabled", false);

        // Set Offset
        var offset = button.data("offset");
        button.data("offset", offset + 10);

        // Script has run
        has_run = true;

        return false;
      },
      error: function (xhr, status, error) {
        console.log("There was an error", error);
      }
    });
  });
});

If you guys could critique I think this would be useful for others too.

Reading Time: < 1 minute

I have spent the better part of 2 hours trouble shooting WordPress frontend ajax bad request issue. The wonderful error 400. I’ll show you how I fixed my issue as I didn’t find the WordPress or stack overflow communities particularly helpful.

Resolving the Bad Request Error

//....ENQUEUE YOUR JAVASCRIPT SCRIPT
// Todo: edit the location of your javascript file.
function rfr_public_enqueue_scripts()
    {
        wp_enqueue_script('rfr-ajax-public', plugins_url('public/assets/js/rfr-frontend.js', __FILE__), array('jquery'), NULL, true);
        wp_localize_script('rfr-ajax-public', 'rfr_ajax', array(
            'url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('rfr_ajax_public_nonce'),
        ));
    }
add_action('wp_enqueue_scripts', 'rfr_public_enqueue_scripts');
Code language: PHP (php)

The next part you need is the handler function. This can include whatever you want. It’s not special – it’s NAME is very special.

//...SET UP YOUR HANDLER FUNCTION
  function rfr_ajax_public()
    {
        if (!wp_verify_nonce($_POST['nonce'], 'rfr_ajax_public_nonce')) {
            error_log("Invalid or no nonce");
            die();
        }
        if (!$_POST['do']) die('No do do in your action.');
        switch ($_POST['do']) {
            case 1: //do fetch
                echo json_encode(['status' => 'grand']);
                exit;
                break;
        }
        wp_die();
    }
Code language: PHP (php)

In the second argument, you’ll find the name of our handler function.

//...
add_action('wp_ajax_rfr_ajax_public', 'rfr_ajax_public');
add_action('wp_ajax_nopriv_rfr_ajax_public', 'rfr_ajax_public');
Code language: JavaScript (javascript)

When you do the javascript part, most articles lead me down a dark path of adding every ajax header, content-type and other attribute going. It seems that was all a waste of time. Thanks internet! You only need what is below

The ACTION must match your handler PHP FUNCTION. Can’t stress this enough. That was the key ingredient I was missing and wasted a large portion of my life resolving.

//... JAVASCRIPT
$.ajax({
            dataType: "json",
            type: "POST",
            url: rfr_ajax.url,
            data: {
                nonce: rfr_ajax.nonce,
                action: 'rfr_ajax_public',
                //payload: payload,
                //do: 1,
            },
            success: function (resp) {
                console.log(resp);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus+" "+errorThrown);
            }
});
Code language: JavaScript (javascript)

There is more you can do to get build this Ajax example up but hopefully it resolves your WordPress Ajax Bad Request Error

Every other day or so it seems, a new question is posted to one of the community
forums that cover ASP.NET Core Razor Pages asking why an AJAX post doesn’t
appear to work, or results in an HTTP 400 error. This article explains the most common cause, and
offers guidance on how to solve it.

@page
@model MyApp.Pages.IndexModel
@inject IAntiforgery antiforgery
@{
    var token = antiforgery.GetAndStoreTokens(HttpContext).RequestToken;
}

services.AddAntiforgery(o => o.HeaderName = "CSRF-TOKEN");

$.ajax({
    type: "POST",
    url: "/",
    data: { foo: "bar" },
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    success: function (response) {
        ...

var token = document.querySelector('input[name="__RequestVerificationToken"]').getAttribute("value");
fetch("", {
    method: "post",
    headers: {
        "RequestVerificationToken": token
    },
    body: { foo: "bar" }
}).then(() => {
    ...
});