Ajax api call doesn't works using onclick returns error 400

Question

So I'm trying to do an API call using Ajax on the Admin page, when I add this API call in onclick attribute, it doesn't work it returns error 400 Bad request, BUT when the API call isn't vinculated at onclick, it works.

using onclick:

    $('#button').on('click', function(){
        var settings = {
            // "url": "http://"+url+"/rest/V1/orders",
            "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);

        });
    });

NOT using onclick (it works):

var settings = {
            // "url": "http://"+url+"/rest/V1/orders",
            "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);

        });

Any help is appreciated.

Answer 1

try this way simple change click event way. check below code

 <script>
    require([
        'jquery'
    ], function ($) {
        $(document).on('click', '#button', function () {
            //write your logic here
        });
    });
</script>

Answer 2

So after a long time searching on forums, i found out this: admin ajax call failed bad request

it helped, and now it's working fine. In resume, i put this after data:

beforeSend: function (xhr){

}

Looks like the function needs to be empty to remove magento's default handler.

the code:

 var settings = {
        // "url": "http://"+url+"/rest/V1/orders",
        "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"
                }
            }
        ),
        beforeSend: function (xhr){

        }
    }
    $.ajax(settings).done(function (response) {
        console.log(response);

    });