Я новичок в Laravel, и я пытаюсь отправить данные сообщения через Ajax в Laravel, и он выдает

MethodNotAllowedException , но когда я отправляю форму по почте, она работает, но обновляет страницу, хотя я использовал Ajax.

Мой код выглядит следующим образом:

Мой код JavaScript Ajax:

function collect(){
    
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN': $("input#token").val()
        }
    });




    const   user = [{"fname": $("input#fname").val(), _token: $("input#token").val(), _method:"POST", "lname": $("input#lname").val(),
                "email": $("input#email").val(), "pass": $("input#pass").val(),
                "confirm-pass": $("input#confirm-pass").val() 
     }];

     var form = $('form#add-user-form');

     var send_button = $('button#send').text();
     $.ajax({
        url: '/users/store',
        method: 'post',
        data: user,
        processData: false,
        dataType: 'json',
        contentType: false,
        beforeSend:function(){
                $(form).find('span.error-text').text('');
                
        },
        success:function(data){
            alert('data sent');
            
            if (data.code == 0 || data.status == 400 ){
                $.each (data.error, function(prefix, value){
                    alert(prefix + '   ' + value[0]);
                    $(form).find('span.'+prefix+'_error').text(value[0]);
                });
            }else {
                
                $(form)[0].reset();
                alert(data.msg)
            }
            

        }

     });

    

   }  

--- Код контроллера ------------------------

$validator = \Validator::make($request -> all(), ['fname' => 'required|min:5|max:25', 
                        'lname' => 'required|min:5|max:25',
                        'email' => 'required|email|unique:users', 
                        'pass' => 'required|min:8|max:20|', 
                        'confirm-pass' => 'required|min:8|max:20'
                        ]);

    if (!$validator -> passes() ){
        return response()->json(['code'=> 0, 'error'=> $validator->errors()->toArray()]);
    }else {
            $user = new users();
            $user -> name = $request -> fname ;
            $user -> email = $request -> email ;
            $user -> password = $request -> pass;
            $query = $user -> save();
            if ( !$query ){
                return response() -> json(['code'=> 0, 'msg' => 'something went wrong']);
            }else {
                return response() -> json(['code' => 1, 'msg' => 'users has been successfully 
                 added']);
        

--------------- HTML-код, который -------------

<div id="registeration-form">

    <div id="form-holder container">

        <form action="{{ route('users.store') }}" method="post" class="registration needs-` 
        validation" id="add-user-form">
                     
                    <input type="text" class="form-control" id="fname"  name="fname" placeholder=" 
                    First Name" required> </input>
                    <span class="text-danger error-text fname_error"></span>
                    <input type="text" id="lname" class="form-control" name="lname" placeholder=" 
                     Last Name " required> </input>
                    <span class="text-danger error-text lname_error"></span>
                    <input type="text" class="form-control" id="email" name="email" 
                     placeholder="Your Email " required> </input> 
                    <span class="text-danger error-text email_error"></span>
                    <input type="password" class="form-control" id="pass" name="pass" 
                     placeholder="Password " required> </input>
                    <span id="text-danger error-text pass-span pass_error"> </span>
                    <input type="password" class="form-control" id="confirm-pass" name="confirm- 
                     pass" placeholder="Confirm Password " required> </input>
                    <span id="text-danger error-text con-pass confirm-pass_error"> </span>
                    <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}" />
                    <button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect();">Create Account </input>

           </form>
        
      </div>

  </div>

Файл My Route web.php

Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');

Я хочу, чтобы Ajax работал без обновления страницы и

     > it does through MethodNotAllowedException  Line 251
2
Hadem 21 Ноя 2021 в 07:17
Я решил проблему, просто получив путь из формы. через эту строку кода $ .ajax ({url: $ ('form # add-user-form'). attr ('action'), method: 'post', ...
 – 
Hadem
21 Ноя 2021 в 11:49
Здорово, что ты во всем разобрался. Я действительно заметил, что ранее уже в моем ответе. stackoverflow.com/a/70052884/7376590
 – 
steven7mwesigwa
21 Ноя 2021 в 12:00

4 ответа

Лучший ответ

Маршрут ниже не существует.

$.ajax({
    // ...
    url: '/users/store',
    // ...
});

Используйте вместо этого: Обратите внимание, что вам не нужно создавать данные вручную.

$.ajax({
    // ...
    type: form.attr("method"),
    url : form.attr("action"),
    data: form.serializeArray(),
    // ...
});

ЗАМЕТКИ:

  1. Обратите внимание, что два маршрута одинаковые :
Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');

Вы можете удалить один из них. Если вы работаете с Laravel 8 и выше, предпочтительнее использовать второй формат.

  1. Хотя это и не обязательно, вы также можете включить в форму приведенную ниже разметку HTML. Значение, отправленное с полем _method, будет использоваться в качестве метода HTTP-запроса.
<input type="hidden" name="_method" value="POST">
  1. Я считаю, что у вас есть несовпадающие HTML-теги на кнопке отправки.
<button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect();">Create Account </input>
  1. Чтобы избежать перезагрузки страницы. передать событие в вызов метода. Кроме того, предотвратите поведение по умолчанию из определения вашего метода.
<!-- HTML code. -->

<button type="button" class="btn btn-outline-primary" id="send" 
                    onClick="collect(event);">Create Account </button>
// JavaScript Ajax code.

function collect(event){

    event.preventDefault();

    $.ajax({

        // ...

    });

    // ...

}

0
steven7mwesigwa 21 Ноя 2021 в 11:52

Вы должны предоставить маршрут для запроса ajax в route/api.php

0
Mhd Ramadhan Arvin 21 Ноя 2021 в 07:33
Не могли бы вы привести мне пример маршрута, который я могу добавить?
 – 
Hadem
21 Ноя 2021 в 07:44
В том виде, в каком оно написано, ваш ответ неясен. Пожалуйста, edit добавьте дополнительные сведения, которые помогут другим понять, как это решает заданный вопрос. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
 – 
Community
21 Ноя 2021 в 07:54
Позвольте Laravel обрабатывать URL-адрес ajax за вас. используйте {{route ('users.store')}} в своем URL-адресе ajax. Вероятно, это решит вашу проблему.
 – 
Mehdi Hosseini
21 Ноя 2021 в 10:10
Вы просто переместите содержимое файла routes/web.php в routes/api.php, или, если не работает, вы можете попробовать решение от @Mehdi Hosseini
 – 
Mhd Ramadhan Arvin
21 Ноя 2021 в 10:50

Используйте это вместо ваших текущих конфигураций ajax:

    url: '{{route('users.store')}}',
    type: 'post',
    data: user,
    processData: false,
    dataType: 'json',
    contentType: false,

Во-первых, лучше использовать блейд-маршруты вместо написания URL-адреса, а во-вторых, это «тип», а не «метод», когда вы пытаетесь использовать метод POST в ajax

0
Ali Mesbahi 21 Ноя 2021 в 10:59

Спасибо всем за сотрудничество в этом вопросе, я решил эту проблему с помощью следующих изменений.

  1. Я добавил маршрут в route / api.php

    Route :: post ('магазин', [usersController :: class, 'store']);


  1. Я изменил свой URL-адрес, отправленный Ajax, как показано ниже.

    url: $ ('form # add-user-form'). attr ('action'),

Это помогло мне решить проблему.

@ steven7mwesigwa Спасибо за ваш ответ, это было действительно полезно.

0
Hadem 21 Ноя 2021 в 19:10