我是 Laravel 的新手，我正在嘗試通過 Laravel 中的 Ajax 提交發布資料，但它拋出
MethodNotAllowedException但是當我通過 post 提交表單時，它確實有效，但重繪 了頁面，盡管我使用了 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>
我的路由 web.php 檔案
Route::post('/store', 'usersController@store');
Route::post('store',[usersController::class, 'store'])->name('users.store');
我想要的是 Ajax 應該在沒有頁面重繪 的情況下作業
> it does through MethodNotAllowedException Line 251
uj5u.com熱心網友回復：
您必須為 ajax 請求提供路由 route/api.php
uj5u.com熱心網友回復：
使用它而不是您當前的 ajax 配置：
url: '{{route('users.store')}}',
type: 'post',
data: user,
processData: false,
dataType: 'json',
contentType: false,
首先，最好使用刀片路由而不是撰寫 url，其次，當您嘗試在 ajax 中使用 POST 方法時，它是“型別”而不是“方法”
uj5u.com熱心網友回復：
下面的路線不存在。
$.ajax({
// ...
url: '/users/store',
// ...
});
改用它：請注意，您不必手動構建資料。
$.ajax({
// ...
type: form.attr("method"),
url : form.attr("action"),
data: form.serializeArray(),
// ...
});
筆記：
- 請注意，2條路線是相同的：
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({
// ...
});
// ...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361930.html
標籤：javascript php 查询 阿贾克斯 拉拉维尔
上一篇：動態呼叫Laravel函式