ahmadajah03 Sun Apr 2020 1 year ago

Tutorial Ajax Request pada Laravel 7

Dalam tutorial ini, Anda akan belajar laravel 7 jquery ajax post post. contoh ini akan membantu Anda mengirim 7 contoh bentuk ajax. langkah demi langkah menjelaskan jquery ajax request laravel 7. Anda dapat memahami konsep jquery ajax post laravel 7 csrf.

Permintaan ajax adalah persyaratan dasar dari setiap proyek php, kami selalu mencari tanpa data refresh halaman harus disimpan dalam database dan itu hanya mungkin dengan permintaan ajax jquery. hal yang sama jika Anda perlu menulis formulir ajax kirim di laravel 7 maka saya akan membantu Anda bagaimana Anda dapat mengirimkan data dengan permintaan ajax dan mendapatkan pada controller.

Anda hanya perlu melakukan tiga hal untuk memahami cara menggunakan permintaan ajax di laravel 7, jadi ikuti saja tiga langkah ini dan Anda akan belajar cara menggunakan permintaan ajax di aplikasi laravel 7 Anda.

Langkah 1: Buat Route

Hal pertama adalah kami menempatkan dua rute dalam satu untuk menampilkan tampilan dan yang lainnya untuk posting ajax. Sangat sederhana, tambahkan kedua rute di file route Anda.

routes/web.php

Route::get('ajaxRequest', 'AjaxController@ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name('ajaxRequest.post');

Langkah 2: Buat Controller

Hal yang sama seperti di atas untuk route, di sini kita akan menambahkan dua metode baru untuk route. Satu akan menangani tata letak tampilan dan yang lainnya untuk metode permintaan posting ajax, jadi mari kita tambahkan di bawah ini:

app/Http/Controllers/AjaxController.php

<?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.']);
    }
   
}

Langkah 3: Buat File Blade

Akhirnya kita perlu membuat file ajaxRequest.blade.php dan di sini kita akan menulis kode jquery ajax dan memberikan token laravel. Jadi file blade sangat penting dalam permintaan ajax. Jadi mari kita lihat file di bawah ini:

resources/views/ajaxRequest.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 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 7 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>

sekarang Anda dapat menjalankan contoh dan melihat.

Anda akan mendapatkan output seperti di bawah ini:

[2019-09-17 03:54:19] local.INFO: array (
'name' => 'Hardik Savani',
'password' => '123456',
'email' => '[email protected]',

Saya harap ini bisa membantu Anda...

ajax request ajax laravel