TAZIO MIRANDOLA Web Applications Developer

Laravel 8 AJAX

in routes/web.php

Route::post('companies/search', 'App\Http\Controllers\CompanyController@search')->name('companies.search');

controller

public function search(Request $request) {
    $R = $request->all();
    $name = $R['name'];
    $companies = Company::where('name', 'LIKE', '%'.$name.'%')->get();
 
    return response()->json($companies, 200);
}

view:

@extends('layouts.app')
@section('content')
<div class="container">
    <form action="" method="post">
        <div class="form-group">
            <label for="name">Company</label>
            <!-- the search input -->
            <input type="text" name="name" id="name" class="form-control" placeholder="Nome" autocomplete="off">
        </div>
        <div class="form-group">
            <button class="btn btn-success btn-submit">Invia</button>
        </div>
    </form>
    <div class="table">
        <!-- result disply -->
        <table class="table" id="companies">
            <thead>
            <tr>
                <th scope="col">id</th>
                <th scope="col">name</th>
                <th scope="col">website</th>
                <th scope="col">email</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<script>
let CSRF_TOKEN = '{{ csrf_token() }}';
// $('meta[name="csrf-token"]').attr('content')
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': CSRF_TOKEN
    }
});
function post_json(url_search, p_data, on_success ) {
    $.ajax({
        type: 'POST',
        url: url_search ,
        data: p_data,
        success: function (txt) {
            let data = JSON.parse(txt);
            on_success.call(data);
        }
    });
}
let url_search = "{{ route('companies.search') }}";
// render the table
function table_render(data){
    let result_tag = "";
    $.each(data, function (i, item) {
        result_tag += "<tr>" +
        "<td>" + item.id + "</td>" +
        "<td>" + item.name + "</td>" +
        "<td>" + item.website + "</td>" +
        "<td>" + item.email + "</td>" +
        "</tr>";
    });
    return result_tag;
}
$(document).ready(function() {
    let el_tbody=$('#companies tbody');
    $("#name").keyup(function (e) {
        e.preventDefault();
        let name = $(this).val().trim();// $("input[name=name]")
        if (name != '') {
            let on_success= function (data) {
                let html = table_render(data);
                el_tbody.html( html );
            }
            let post_data={name: name, _token: CSRF_TOKEN};
            post_json(url_search, post_data, on_success)
        } else {
            el_tbody.html('');
        }
    });
});
</script>
 
@endsection

Il token può essere generato con la direttva @csfr in un Form, oppure con helper in blade , oppure inserito in un tag meta dell’intestazione html:

    <meta name="csrf-token" content="{{ csrf_token() }}">

da leggere con

    $('meta[name="csrf-token"]').attr('content')

se non viene inviato il token correttamente si legge errore 419.