Search code examples
wordpresswordpress-rest-api

Wordpress custom REST route giving back 400 Bad Request


I am trying to test out a custom REST route in Wordpress. I have the following PHP in my own plugin file:

add_action( 'rest_api_init', function() {
    register_rest_route('tuck-api/v1', '/send_campaign', array(
        'methods' => 'POST',
        'callback' => 'campaign_email_route'
    ));
});
function campaign_email_route( WP_REST_Request $request ) {
    return json_encode($request->get_json_params());
}

Right now I just want it to echo back the request body as a test. I am calling it with the following jQuery AJAX request from my plugin in the admin panel:

$.ajax({
    type: 'POST',
    url: '/wp-json/tuck-api/v1/send_campaign',
    contentType: 'application/json',
    data: {
        recipient: $('.email-recipient').val(),
        campaign_id: campaignList[i].id.toString()
    },
    success: function(res) {
        console.log(res);
    }
});

The console.log in the success callback is what spits out a 400 Bad Request error.


Solution

  • Try this code

    Class SendCampaign{
    
      public function __construct() {
            add_action( 'rest_api_init', array( $this, 'campaign_init_rest_api') );
        }
    
        public function campaign_init_rest_api()
        {
          register_rest_route('tuck-api/v1', '/send_campaign', array(
              'methods' => 'POST',
              'callback' => array( $this, 'campaign_email_route')
          ));
        }
    
    
        function campaign_email_route($data ) {
            $request = $data['data'];     
            echo json_encode($data['data']);
            exit;
        }
    
    }
    
    $SendCampaign = new SendCampaign();
    
    
    
    <script>
      jQuery.ajax({
          type: 'POST',
          url: '/wp-json/tuck-api/v1/send_campaign',
         // contentType: 'application/json',
          data: {data:{
              recipient: jQuery('.email-recipient').val(),
              campaign_id:  campaignList[i].id.toString()}
          },
          success: function(res) {
              console.log(res);
          }
      });
    </script>