php - 此路由不支持 GET 方法。支持的方法:POST。在 Laravel 7.24.0
问题描述
我正在尝试使用 Ajax 提交表单数据,但收到错误消息。我找不到错误。
小提醒 - 我正在使用 Sweet Alert 来显示成功或错误消息
这是控制器代码 -
class NewUserRegnController extends Controller
{
public function submitNewRegn(Request $request){
$first_name = $request->first_name;
$last_name = $request->last_name;
$email = $request->email;
$password = Hash::make($request->password, [
'memory' => '1024',
'time' => '2',
'threar' => '2',
]);
// $confirm_password = $request->confirm_password;
$mobno = $request->mobno;
$dob = $request->dob;
$gender = $request->gender;
$address = $request->address;
$country = $request->country;
date_default_timezone_set("Asia/Kolkata");
$time = date("Y-m-d,H:i:s ");
// $users = new Newuser();
// $users->first_name = $first_name;
// $users->last_name = $last_name;
// $users->email = $email;
// $users->password = $password;
// $users->mobno = $mobno;
// $users->dob = $dob;
// $users->gender = $gender;
// $users->address = $address;
// $users->country = $country;
// $users->TIME_STAMP = $time;
// $users->save();
$act = "INSERT";
DB::select('CALL my_stored_procedures(?,?,?,?,?,?,?,?,?,?,?,?)', array($act,0,$first_name,$last_name,$email,$password,$mobno,$dob,$gender,$address,$country,$time));
和刀锋——
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Ajax script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<!-- Sweet Alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top">
<a class="navbar-brand" href="index">User Info</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li class="nav-item"><a class="nav-link" href="new_user"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</nav>
</div>
</div>
<div class="text-center pt-3">
<p style="color:red">For safety,Do Not hit the back button or refresh the page</p>
<p style="color:red">Use the buttons given in the form below</p>
</div>
<form class="form-group" id="new_user_form" method="post" onsubmit="sendForm()" autocomplete="off">
<div class="row m-5 p-5 bg-warning text-white">
<div class="col">
<div class="form-group">
@csrf
<label for="fname">First Name:</label>
<input type="text" class="form-control" name="first_name" value="{{$first_name}}" readonly >
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" name="last_name" value="{{$last_name}}" readonly>
</div>
<div class="form-group">
<label for="email">Email/Username:</label>
<input type="text" class="form-control" name="email" value="{{$email}}" readonly>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="password" value="{{$password}}" readonly>
</div>
<div class="form-group">
<label for="mobno">Mobile Number:</label>
<input type="text" class="form-control" name="mobno" value="{{$mobno}}" readonly>
</div>
<div class="form-group">
<label for="dob">Date of Birth(in YYYY-MM-DD):</label>
<input type="text" class="form-control" name="dob" value="{{$dob}}" readonly>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<input type="text" class="form-control" name="gender" value="{{$gender}}" readonly>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" rows="5" name="address" readonly>{{$address}}</textarea>
</div>
<div class="form-group">
<label for="country">Country:</label>
<input name="country" class="form-control" id="countrylist" value="{{$country}}" readonly>
</div>
<div class="form-group">
<label for="dt">Date and Time of Submission:</label>
<input type="text" class="form-control" name="dt" value=@php date_default_timezone_set("Asia/Kolkata"); echo date("Y-m-d,H:i:s ") @endphp readonly>
</div>
<div class="form-group text-center">
<!-- <a href="{{url('recheck_form')}}"/><button type="submit" class="btn btn-primary mb-2 text-center" onclick="store_using_ajax()">Submit</button> -->
<input type="submit" class="btn btn-primary mb-2 text-center" id="submit_form">
</div>
<div class="form-group text-center ">
<button type="button" class="btn btn-danger"><a href="new_user">Cancel</a></button>
<button type="button" class="btn btn-warning "><a href="">Edit</a></button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#new_user_form').on('submit',function sendForm(e){
e.preventDefault();
var fd = new FormData(myform );
var form_data = $(this);
$.ajax({
type:'POST',
url: "submit-form" ,
cache: false,
processData: false,
contentType: false,
data:fd,
data: $('#new_user_form').serialize(),
success:function(response){
swal({
title: "Form Submitted Successfully!",
text: "New User Registered !",
icon: "success",
button: "Okay",
})
},
error: function(response){
swal({
title: "Error in submitting form",
text: "Please refresh the page and try again! ",
icon: "warning",
button: "Okay",
});
}
});
});
});
</script>
路线 -
Route::get('login','LoginController@loginuser');
Route::post('loggedinuser' , 'LoginController@loginvalidator' );
Route::get('new_user','NewUserController@getCountry');
Route::post('recheck-form', 'NewUserController@showdata');
Route::get('loginbackup',function(){
return view('login-backup');
});
Route::post('submit-form' , 'NewUserRegnController@submitNewRegn');
我尝试更改控制器和函数名称,但这没有帮助。此外,删除 cookie 和清除浏览器历史记录也不起作用。
解决方案
首先,我忘了添加一些关闭的 html 标记。完成后,我需要在 ajax 脚本和元标记中添加 CSRF 令牌。 我用以前犯的所有错误重新编辑了这个问题,以显示我做错的地方。
以下是要添加的代码:-
关闭 HTML 标签
</form>
</body>
</html>
元标记
<meta name="csrf-token" content="{{ csrf_token() }}">
Ajax 脚本中的 Ajax 请求标头设置
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
推荐阅读
- android - 博览会中的应用程序不断刷新和随机重建,没有任何明显的触发
- javascript - 如何在vuejs中动态呈现包含自定义组件的字符串
- blockchain - 在 Solidity 中获取 msg.sender 的最后购买时间戳
- react-native - React Native List Shared Files Google Drive 与
- flutter - Flutter Google Maps 更新地图上的标记
- python - React 组件未在 django index html 模板中呈现
- reactjs - 如何在路由更改期间保持组件状态在 React 中?
- reactjs - 如何使用钩子在反应中提交文本区域字段?
- arrays - 为什么下一个方法不改变数组但另一个改变了它的值?
- java - Java byte[] 渲染以做出反应