Ajax Форма отправки данных без обновления

Question

Во-первых, я застрял между method и type , как будто я определил метод в форме, поэтому мне не нужно определять его в ajax, и если так? ajax дает undefined в консоли.

Во-вторых, следующий код дает 405 метод POST, недопустимый .

Кроме того, когда мне удастся попробовать кучу вещей ajax обновить всю страницу, я хочу отправить данные на сервер без обновления страницы.

Любая помощь подойдет !!

Функция контроллера

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::post('/developer/create/skill/{user_id}', 'SuperAdminControllers\DeveloperController@storeDevSkill')->name('store.developer.skill');

Форма:

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

Кнопка:

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

Сценарий:

<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>

Answer 1

Вам необходимо передать атрибут action из формы на ваш ajax вызов, например, так:

<script>
  $(document).ready(function () {
    $('#form_skill').on('submit', function (event) {
      event.preventDefault();
      $.ajax({
        url: $(this).attr('action'),
        type: "post",
        data: $(this).serialize(),
        dataType: 'json',

        success: function (response) {
          if (response.error) {
            console.log('Ajax Success')
          } else {
            console.log(response.success)
          }
        }
      });
    });
  });
</script>

Попробуйте и посмотрите, изменит ли это что-либо.

Answer 2

$ (document) .on ('submit', '#form_skill', function (e) {

e.preventDefault();

var nFormId = '#'+ $(this).attr('id');
var formData = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
          type: "POST",
          url: url,
          data: formData,
          success: function (response) {
            console.log(response);
            $(nFormId)[0].reset();
          },
          error: function (jqXHR, exception) {

          },
          beforeSend: function () {

          },
          complete: function () {

        }
});

});

Надеюсь, этот ответ поможет вам.

Answer 3

Попробуйте это

такие данные, как new FormData(this) и действие $(this).attr('action'),

<script>
    $(document).ready(function () {
        $('#form_skill').on('submit', function (event) {

            event.preventDefault();
            var action_url = '';
            var user_id = $(this).attr('value');
            console.log(action_url)

            $.ajax({
                url: $(this).attr('action'),
                type:'POST',
                data: new FormData(this),
                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>