Skip to content
W3S101

Laravel - Ajax

Laravel - Ajax

Section titled “Laravel - Ajax”

AJAX (Asynchronous JavaScript and XML) enables web applications to send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page. While XML can be used, JSON is now the more common format for data exchange.

Laravel makes handling AJAX requests straightforward. You’ll typically use a JavaScript library like jQuery (as in the original example), the native fetch API, or a more modern HTTP client like Axios to make requests from the client-side. On the server-side, Laravel controllers can easily return JSON responses.

Key Considerations for AJAX in Laravel:

Section titled “Key Considerations for AJAX in Laravel:”
  • CSRF Protection: Laravel automatically protects against Cross-Site Request Forgery. For AJAX requests, you need to include the CSRF token.
  • Routing: Define routes in routes/web.php or routes/api.php to handle AJAX requests.
  • Controller Logic: Controllers process the request and usually return a JsonResponse.
  • Error Handling: Implement client-side and server-side error handling.

Returning JSON Responses

Section titled “Returning JSON Responses”

Laravel’s response() helper can be used to easily create JSON responses. The json() method on the response factory will automatically set the Content-Type header to application/json and convert the given array to JSON.

Syntax for response()->json():

return response()->json(['key' => 'value', 'another_key' => 'another_value'], 200, $headers, $options);
  • data (array|JsonSerializable): The data to be converted to JSON.
  • status (int, optional): The HTTP status code (defaults to 200).
  • headers (array, optional): Custom HTTP headers.
  • options (int, optional): JSON encoding options (e.g., JSON_PRETTY_PRINT).

Example: Using jQuery AJAX with Laravel

Section titled “Example: Using jQuery AJAX with Laravel”

Step 1: Set up CSRF Token for AJAX (Client-Side)

In your main Blade layout file (e.g., resources/views/layouts/app.blade.php), add a meta tag for the CSRF token:

<head>
    <!-- Other head elements -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Ajax Example</title>
</head>

Then, configure jQuery (or your preferred library) to include this token in all AJAX requests. For jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

Note: If you are using a library like Axios, it often has built-in mechanisms or recommendations for handling CSRF tokens (e.g., by reading from a cookie like XSRF-TOKEN if Laravel is configured for it).

Step 2: Create the View (resources/views/message.blade.php)

This view will have a button that, when clicked, makes an AJAX request.

@extends('layouts.app') {{-- Assuming you have a layout --}}


@section('content')
<div class="container">
    <h1>AJAX Message Updater</h1>
    <div id="message-area" style="padding: 10px; border: 1px solid #ccc; margin-bottom: 10px;">
        This message will be replaced using Ajax. Click the button to replace the message.
    </div>
    <button type="button" id="getMessageButton" class="btn btn-primary">Replace Message</button>
</div>


<script>
    $(document).ready(function() {
        $('#getMessageButton').on('click', function() {
            $.ajax({
                type: 'POST', // Or 'GET', depending on your route
                url: '{{ route("ajax.getmessage") }}', // Using a named route
                // data: { some_param: 'value' }, // Optional data to send
                dataType: 'json', // Expect a JSON response
                success: function(data) {
                    $('#message-area').html(data.message);
                    // console.log('Success:', data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#message-area').html('Error fetching message: ' + textStatus);
                    // console.error('Error:', textStatus, errorThrown);
                }
            });
        });
    });
</script>
@endsection

Step 3: Create the Controller (AjaxDemoController)

php artisan make:controller AjaxDemoController

Step 4: Add a method to app/Http/Controllers/AjaxDemoController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;


class AjaxDemoController extends Controller
{
    public function getMessage(Request $request): JsonResponse
    {
        // You can process $request->input() if data was sent
        $dynamicMessage = "This is a dynamically loaded message from the server at " . now()->toTimeString();
        return response()->json(['message' => $dynamicMessage]);
    }
}

Step 5: Define Routes (routes/web.php)

use App\Http\Controllers\AjaxDemoController;


// Route to display the initial page
Route::get('ajax-demo', function () {
    return view('message');
})->name('ajax.demo.page');


// Route to handle the AJAX request
Route::post('/get-dynamic-message', [AjaxDemoController::class, 'getMessage'])->name('ajax.getmessage');

Step 6: Test the Functionality

  1. Navigate to http://your-app.test/ajax-demo in your browser.

  2. You should see the initial page with the button.

  3. Click the “Replace Message” button. The text in the message-area div should update with the message received from the server via AJAX.

Practical Application: Live Search or Form Submission

AJAX is commonly used for features like:

  • Live search: As a user types in a search box, AJAX requests are sent to the server to fetch and display matching results without a full page reload.
  • Form submissions: Submitting forms without a page refresh, providing instant feedback or validation errors.
  • Dynamic content updates: Loading comments, notifications, or other content updates in real-time.

Common Learning Obstacle: CSRF Token Mismatch

If you encounter a 419 CSRF token mismatch error, it usually means the CSRF token was not sent correctly with your AJAX POST, PUT, PATCH, or DELETE request. Ensure you’ve set up the meta tag and configured your JavaScript library (like jQuery’s ajaxSetup or Axios interceptors) to include the X-CSRF-TOKEN header.

Additional Resources:

Section titled “Additional Resources:”