یک مثال برای درخواست ایجکس Ajax Request در لاراول

درخواست 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>
Facebook
Twitter
LinkedIn
Telegram
WhatsApp

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات و نوشته ها