Ajax Post Data Form without refreshing – Jquery ajax

Firstly, I’ve been stuck between method and type as if I’ve defined method in form so I don’t have to define it in ajax, and if so? ajax gives undefined in console.

Secondly, The following code gives 405 POST method not allowed.

Also, When I do succeed trying bunch of things ajax refreshes the whole page, I want to post data to server without refreshing the page.

Any help would do!!

Controller Function

public function storeDevSkill(Request $request, $user_id)
{
    $this->validate($request,
        [
            'dev_skill_name' => 'required',
            'dev_skill_exp' => 'required',
        ]);

    try {
        $data = array(
            'dev_id' => $user_id,
            'dev_skill_name' => $request->dev_skill_name,
            'dev_skill_exp' => $request->dev_skill_exp,
        );
        DevSkill::create($data);
        return back();
    } catch (Exception $exception) {
        return back()->withError($exception->getMessage())->withInput();
    }
}

Route:

    Route::post('/developer/create/skill/{user_id}', 'SuperAdminControllersDeveloperController@storeDevSkill')->name('store.developer.skill');

Form:

<form id="form_skill" method="POST" enctype="multipart/form-data" action= "{{route('store.developer.skill',$user->user_id)}}">

Button:

<button type="submit" id="addskillSubmit" value="{{$user->user_id}}" style="display: none;" class="btn btn-primary">Save</button>

Script:

<script>
    $(document).ready(function () {
        $('#form_skill').on('submit', function (event) {
            console.log("Ajax Call")
            event.preventDefault();
            var action_url = '';
            var user_id = $(this).attr('value');
            console.log(action_url)

            $.ajax({
                url: action_url,
                type: "post",
                data: $(this).serialize(),
                // dataType: 'json',

                success: function (response) {
                    if (response.error) {
                        console.log('Ajax Success')
                    } else {
                        // var table = $('#addskilltable').DataTable();
                        // table.ajax.reload();
                        console.log(response.success)
                    }
                }
            });
        });
    });
</script>