Laravel Ajax: Cara Menggunakan Ajax di Laravel – Codewithaden

Yang terakhir lima Bertahun -tahun, Laravel telah menjadi kerangka dominan PHP. Ini karena begitu banyak aplikasi web yang dibangun di Laravel sekarang. Selain itu, Laravel Ekosistem merevolusi Php Aplikasi web.

Sampai sekarang, kami telah memasukkan data dengan refresh halaman. Tapi sekarang, kita akan melihat bagaimana kita bisa menggunakan Ajax Permintaan untuk memasukkan data ke dalam database dan mengambilnya. Jika Anda baru Laravel, Lihat saya Laravel 7 CRUD Contoh dari awal

Apa itu Ajax

Ajax adalah cara untuk berkomunikasi antara klien dan server tanpa refresh halaman. Ini adalah teknik untuk meneruskan data dari satu server ke server lainnya tanpa gangguan.

Bentuk lengkap Ajax adalah JavaScript Asynchronous dan XML . Dalam bentuk reguler, kami mendefinisikan rute pos dalam aksi, tetapi, dalam hal ini, kami menggambarkan tindakan dalam Javascript dan biarkan Javascript kode menangani sisanya.

Perbedaan antara permintaan normal dan AJAX.

Klien mengirimkan permintaan ke server, server merespons dengan halaman tertentu, yang berisi data statis atau dinamis.

Saat dalam permintaan AJAX, permintaan klien ke server, server merespons dengan data dan bukan seluruh halaman. Jadi itulah perbedaan utama antara permintaan reguler dan AJAX.

Server mengembalikan data dalam Format JSON atau format XML. Dewasa ini, Json menjadi semakin populer.

Laravel

Sintaks dari permintaan Ajax jQuery adalah sebagai berikut.

jQuery.ajax( url [, settings ] ) 

Parameter pertama adalah URL yang diminta permintaan.

Parameter kedua adalah pasangan kunci/nilai yang mengkonfigurasi permintaan AJAX. Semua pengaturan adalah opsional.

Default dapat diatur untuk opsi apa pun dengan $ .AjaxSetup () . Melihat jQuery.AJAX (Pengaturan) Di bawah ini untuk daftar lengkap semua pengaturan.

Laravel Ajax

Anda memerlukan pustaka JavaScript untuk mengirim permintaan jaringan tanpa refresh halaman ke server untuk menggunakan AJAX. Permintaan AJAX dapat didapat atau diposting atau tipe yang valid lainnya.

Menggunakan Ajax di Laravel , Anda perlu mengimpor jQuery Perpustakaan Dalam file tampilan Anda untuk menggunakan fungsi AJAX JQuery, yang akan digunakan untuk mengirim dan menerima data menggunakan AJAX dari server. Di sisi server, Anda dapat menggunakan fungsi respons () untuk mengirim respons ke klien, dan untuk mengirim respons dalam format JSON, Anda dapat rantai fungsi respons dengan fungsi JSON ().

Jika permintaannya adalah posting, maka gunakan jQuery ajax () atau post () Metode, kami akan mengirim permintaan ke server untuk menyimpan nilai formulir dalam database.

Jadi mari kita mulai aplikasi kecil ini dengan memasang Laravel.

Langkah 1: Instal dan konfigurasikan Laravel.

Anda dapat menginstal Laravel dengan perintah berikut.

composer create-project laravel/laravel laravel-ajax --prefer-dist 

Setelah menginstal Laravel , kita perlu mengonfigurasi database. Anda dapat mengatur kredensial basis data Anda di .env mengajukan.

Kami membangun aplikasi bahan makanan sederhana di mana pengguna dapat menambahkan item. Jadi pertama -tama, kita perlu mengembangkan skema untuk itu. Untuk menghasilkan file migrasi, kita perlu mengetik perintah berikut.

php artisan make:migration create_groceries_table
 

Jadi itu telah menghasilkan file migrasi, sekarang tentukan kolom dalam file itu.

public function up()
 {
   Schema::create('groceries', function (Blueprint $table) {
      $table->increments('id');
      $table->string('name');
      $table->string('type');
      $table->integer('price');
      $table->timestamps();
    });
 } 

Sekarang migrasi tabel ke dalam basis data kami.

php artisan migrate 

Langkah 2: Tentukan rute, model, dan pengontrol.

Untuk menghasilkan model dan pengontrol, tekan perintah berikut.

php artisan make:model Grocery
php artisan make:controller GroceryController 

Langkah selanjutnya adalah mendefinisikan rute. Akhirnya, kita perlu menambahkan rute di rute >> web.php mengajukan.

// web.php

Route::view('/grocery', 'grocery');
Route::post('/grocery/post', 'GroceryController@store'); 

Sampai sekarang, kami belum membuat file tampilan. Jadi mari kita lakukan itu. Pertama, kita perlu membuat file ini di dalam Sumber daya >> tampilan >> grosir.blade.php mengajukan.



    
        
        
        

        Grocery Store
        
    
    
      Grocery App 
 

Pergi ke CMD dan mulai server pengembangan.

php artisan serve 

Navigasi ke http://localhost:8000/grocery. Anda dapat melihat halaman kelontong kami di browser.

Langkah 3: Buat formulir bootstrap.

Dalam grosir.blade.php File, tulis kode bootstrap berikut.



    
        
        
        

        Grocery Store
        
    
    
      

Oke, sekarang tambahkan jQuery di grosir.blade.php mengajukan. Ingatlah untuk menambahkan file JS tepat di atas penutupan tubuh menandai. Saya telah menggunakan CDN untuk jQuery. Anda dapat menggunakan lokal Anda jQuery mengajukan.

 

Langkah 4: Mengatur permintaan AJAX untuk Laravel.

Pertama, kita perlu mendefinisikan Csrf token di kami meta menandai. Dalam kasus sebelumnya, kami menggambarkan bidang yang disebut “ {{csrf_field ()}} , ”Tetapi dalam kasus AJAX kami, kami telah mendefinisikannya di tag meta.

Saat kami mengatur permintaan AJAX, kami juga perlu mengatur header untuk kami Token CSRF .

Saat kami memposting data ke server, itu harus berisi a Csrf token.

 jQuery(document).ready(function(){
            jQuery('#ajaxSubmit').click(function(e){
               e.preventDefault();
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
            });
          }); 

Jadi, ketika pengguna mengklik tombol kirim, acara klik ini dipanggil, dan kemudian pertama -tama kita mencegah formulir untuk mengirim dan kemudian mengatur header untuk permintaan postingan kami di masa mendatang.

Sekarang, tambahkan jQuery.ajax () Fungsi dalam acara klik itu untuk mengirimkan permintaan ke server dengan ketiga data input.

 

jQuery.ajax () Fungsi berisi objek parameter. Itu berisi a Url untuk mengirim meminta , Properti Metode untuk memeriksa metode permintaan HTTP mana yang digunakan, objek data yang berisi semua data formulir.

Itu kesuksesan dan kesalahan fungsi ada di sana. Jika permintaan kami berhasil mengirim, kami dapat menangkap data yang dikembalikan dalam fungsi keberhasilan, dan jika itu melempar kesalahan, kami dapat menangkap kesalahan dalam fungsi kesalahan.

Langkah 5: Tulis fungsi toko untuk menyimpan data.

Beralih ke GroceryController.php mengajukan dan menambahkan kode berikut.

// GroceryController.php

use App\Grocery;

 public function store(Request $request)
 {
        $grocery = new Grocery();
        $grocery->name = $request->name;
        $grocery->type = $request->type;
        $grocery->price = $request->price;

        $grocery->save();
        return response()->json(['success'=>'Data is successfully added']);
 } 

Kita perlu menampilkan pesan yang telah berhasil kita tambahkan data.



    
        
        
        
        
        Grocery Store
        
    
    
      

Jadi, saya telah menampilkan pesan bahwa data telah berhasil ditambahkan di sini pada kesuksesan.

Itu saja untuk Ajax di Laravel

Posting yang disarankan

Validasi Laravel

Cara mengekspor data dalam laravel

Hasilkan PDF di Laravel

Cara meningkatkan ke Laravel

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *