Я новичок в 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
4 ответа
Маршрут ниже не существует.
$.ajax({
// ...
url: '/users/store',
// ...
});
Используйте вместо этого: Обратите внимание, что вам не нужно создавать данные вручную.
$.ajax({
// ...
type: form.attr("method"),
url : form.attr("action"),
data: form.serializeArray(),
// ...
});
ЗАМЕТКИ:
- Обратите внимание, что два маршрута одинаковые :
Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');
Вы можете удалить один из них. Если вы работаете с Laravel 8 и выше, предпочтительнее использовать второй формат.
- Хотя это и не обязательно, вы также можете включить в форму приведенную ниже разметку HTML. Значение, отправленное с полем
_method, будет использоваться в качестве метода HTTP-запроса.
<input type="hidden" name="_method" value="POST">
- Я считаю, что у вас есть несовпадающие HTML-теги на кнопке отправки.
<button type="button" class="btn btn-outline-primary" id="send"
onClick="collect();">Create Account </input>
- Чтобы избежать перезагрузки страницы. передать событие в вызов метода. Кроме того, предотвратите поведение по умолчанию из определения вашего метода.
<!-- 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({
// ...
});
// ...
}
Вы должны предоставить маршрут для запроса ajax в route/api.php
routes/web.php в routes/api.php, или, если не работает, вы можете попробовать решение от @Mehdi Hosseini
Используйте это вместо ваших текущих конфигураций ajax:
url: '{{route('users.store')}}',
type: 'post',
data: user,
processData: false,
dataType: 'json',
contentType: false,
Во-первых, лучше использовать блейд-маршруты вместо написания URL-адреса, а во-вторых, это «тип», а не «метод», когда вы пытаетесь использовать метод POST в ajax
Спасибо всем за сотрудничество в этом вопросе, я решил эту проблему с помощью следующих изменений.
Я добавил маршрут в route / api.php
Route :: post ('магазин', [usersController :: class, 'store']);
Я изменил свой URL-адрес, отправленный Ajax, как показано ниже.
url: $ ('form # add-user-form'). attr ('action'),
Это помогло мне решить проблему.
@ steven7mwesigwa Спасибо за ваш ответ, это было действительно полезно.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.