Laravel – Ajax

Để sử dụng Ajax (Asynchronous JavaScript and XML), bạn cần Import thư viện jquery vào view và sử dụng phương thức ajax() để gửi và nhận dữ liệu.

Phía server side bạn cần dùng phương thức response() để trả về dữ liệu dạng JSON với json().

Cấu trúc phương thức json()

json(string|array $data = array(), int $status = 200, array $headers = array(), int $options)

Ví dụ

Step 1 : Tạo message.blade.php với nội dung code như bên dưới.

resources/views/message.blade.php

<html>
   <head>
      <title>Ajax Example</title>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      
      <script>
         function getMessage(){
            var PostData = {
                _token: "{{ csrf_token() }}",
            };

            $.ajax({
               type:'POST',
               url:'/getmsg',
               data:PostData,
               success:function(data){
                  $("#msg").html(data.msg);
               }
            });
         }
      </script>
   </head>
   
   <body>
      <div id = 'msg'>This message will be replaced using Ajax. 
         Click the button to replace the message.</div>
      {{ Form::button('Replace Message',['onClick'=>'getMessage()']) }}
   </body>

</html>

Step 2 : Tạo controller AjaxController bằng lệnh command như bên dưới.

php artisan make:controller AjaxController

Step 3 : Thêm code như bên dưới vào controller AjaxController vừa tạo.

app/Http/Controllers/AjaxController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AjaxController extends Controller
{
    public function index(){
        $msg = "This is a simple message.";
        return response()->json(array('msg'=> $msg), 200);
    }
}

Step 4 : Thêm code sau vào routes/web.php.

Route::get('ajax',function(){
   return view('message');
});
Route::post('/getmsg','AjaxController@index');

Step 5 : Vào http://localhost:8000/ajax để test kết quả.

Step 6 : Click vào nút Replace Message để xem ajax trả về dữ liệu mới.