Ajax api call returning Bad Request decoding error

Question

I'm trying to do an ajax API call on the admin page, but it returns a Decoding error: \nUnable to unserialize value. Error: Syntax error...

$('#button').on('click', function(){
    $.ajax({
        url: "<?php echo $block->getBaseUrl()."rest/V1/orders" ;?>",
        data: {
            "entity":{
                "entity_id": Number(<?php echo $order_id; ?>),
                "status":"processing",
                "state":"processing"
            }
        },
        type: 'POST',
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer "+"<?php echo $token; ?>"
        },
        success: function(response){
            console.log(response);
        },
        error: function (xhr, status, errorThrown) {
            console.log('Error happens. Try again.');
            console.log('xhr: ', xhr);
            console.log('status: ', status);
            console.log('errorThrown: ', errorThrown);
        }
    });
});

Answer 1

So i tried this way and worked:

var settings = {
            "url": "<?php echo $block->getBaseUrl()."rest/V1/orders" ;?>",
            "method": "POST",
            "timeout": 0,
            "headers": {
            "Content-Type": "application/json",
            "Authorization": "Bearer "+"<?php echo $token; ?>"
            },
            "data": JSON.stringify(
                {
                    "entity":{
                        "entity_id": order_id,
                        "status":"processing",
                        "state":"processing"
                    }
                }
            ),
        }
        $.ajax(settings).done(function (response) {
            console.log(response);

        });