درخواست Ajax یکی از نیازهای اساسی هر پروژه php است، ما همیشه به دنبال این هستیم که هنگام ذخیره داده ها در پایگاه داده صفحه رفرش نشود و این فقط با درخواست jquery ajax امکان‌پذیر است. اگر نیاز به نوشتن فرم ایجکسی در لاراول 6 دارید، این مقاله را بخوانید.
قدم اول: ساخت روت ها یا همان مسیرها:
در اولین قدم ما دو مسیر را در یکی برای نمایش view و دیگری برای post ajax می سازیم. بنابراین ساده هر دو مسیر را به فایل routes/web.php خود اضافه کنید.
Route::get('ajaxRequest', 'AjaxController@ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name('ajaxRequest.post');قدم دوم: ساخت کنترلر
مانند موارد بالا برای مسیرها، در اینجا دو متد جدید برای مسیرها به کنترلری به نام AjaxController.php که در مسیر app/Http/Controllers/AjaxController.php ساخته ایم اضافه می کنیم. یکی برای تنظیم طرح بندی یا لی اوت view و دیگری برای متد درخواست post ajax، بنابراین بیایید موارد زیر را اضافه کنیم:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AjaxController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequest()
{
return view('ajaxRequest');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequestPost(Request $request)
{
$input = $request->all();
\Log::info($input);
return response()->json(['success'=>'Got Simple Ajax Request.']);
}
}قدم سوم: فایل Blade ایجاد کنید:
در نهایت ما نیاز به ایجاد فایل ajaxRequest.blade.php در مسیر resources/views/ajaxRequest.blade.php داریم و در اینجا کد jquery ajax را می نویسیم و توکن لاراول را پاس می کنیم. بنابراین فایل blade در درخواست ajax بسیار مهم است. پس بیایید فایل زیر را ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax Request example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container">
<h1>Laravel 6 Ajax Request example</h1>
<form >
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" placeholder="Name" required="">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password" class="form-control" placeholder="Password" required="">
</div>
<div class="form-group">
<strong>Email:</strong>
<input type="email" name="email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<button class="btn btn-success btn-submit">Submit</button>
</div>
</form>
</div>
</body>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit").click(function(e){
e.preventDefault();
var name = $("input[name=name]").val();
var password = $("input[name=password]").val();
var email = $("input[name=email]").val();
$.ajax({
type:'POST',
url:"{{ route('ajaxRequest.post') }}",
data:{name:name, password:password, email:email},
success:function(data){
alert(data.success);
}
});
});
</script>
</html>