Ajax in Laravel

This project will demonstrate how to use Ajax in Laravel

  • AjaxInLaravel
    • app
      • Http
        • Controllers
          • DemoController.php
      • Models
        • Product.php
    • resources
      • views
        • demo
          • index.blade.php
    • routes
      • web.php
<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class DemoController extends Controller
{
    public function index()
    {
        return view('demo/index');
    }

    public function ajax1()
    {
        return response()->json(array('result' => 'Hello Ajax'), 200);
    }

    public function ajax2(Request $request)
    {
        $name = $request->get('fullName');
        return response()->json(array('result' => 'Hello ' . $name), 200);
    }

    public function ajax3($fullName)
    {
        return response()->json(array('result' => 'Hi ' . $fullName), 200);
    }

    public function ajax4()
    {
        $product = new Product();
        $product->id = 'p01';
        $product->name = 'name 1';
        $product->price = 20;
        return response()->json(array('product' => $product), 200);
    }

    public function ajax5()
    {
        $products = array();
        
        $product1 = new Product();
        $product1->id = 'p01';
        $product1->name = 'name 1';
        $product1->price = 20;
        array_push($products, $product1);

        $product2 = new Product();
        $product2->id = 'p02';
        $product2->name = 'name 2';
        $product2->price = 21;
        array_push($products, $product2);

        $product3 = new Product();
        $product3->id = 'p03';
        $product3->name = 'name 3';
        $product3->price = 22;
        array_push($products, $product3);

        return response()->json(array('products' => $products), 200);
    }
}
<?php

namespace App\Models;

class Product {
    var $id;
    var $name;
    var $price;
}
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#buttonDemo1').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: "{{url('/demo/ajax1')}}",
                    success: function (data) {
                        $('#result1').html(data.result);
                    }
                });
            });

            $('#buttonDemo2').on('click', function () {
                var fullName = $('#fullName').val();
                $.ajax({
                    type: 'GET',
                    data: {
                        fullName: fullName
                    },
                    url: "{{url('/demo/ajax2')}}",
                    success: function (data) {
                        $('#result2').html(data.result);
                    }
                });
            });

            $('#buttonDemo3').on('click', function () {
                var fullName = $('#fullName2').val();
                $.ajax({
                    type: 'GET',
                    url: "{{url('/demo/ajax3')}}/" + fullName,
                    success: function (data) {
                        $('#result3').html(data.result);
                    }
                });
            });

            $('#buttonDemo4').on('click', function () {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: "{{url('/demo/ajax4')}}",
                    success: function (data) {
                        var s = 'id: ' + data.product.id;
                        s += '<br>name: ' + data.product.name;
                        s += '<br>price: ' + data.product.price;
                        $('#result4').html(s);
                    }
                });
            });

            $('#buttonDemo5').on('click', function () {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: "{{url('/demo/ajax5')}}",
                    success: function (data) {
                        var s = '';
                        for (var i = 0; i < data.products.length; i++) {
                            s += '<tr>';
                            s += '<td>' + data.products[i].id + '</td>';
                            s += '<td>' + data.products[i].name + '</td>';
                            s += '<td>' + data.products[i].price + '</td>';
                            s += '</tr>';
                        }
                        $('#tableProducts tbody').html(s);
                    }
                });
            });

        });
    </script>
</head>

<body>

    <fieldset>
        <legend>Demo 1</legend>
        <input type="button" value="Demo 1" id="buttonDemo1">
        <br>
        <span id="result1"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 2</legend>
        <input type="text" id="fullName">
        <input type="button" value="Demo 2" id="buttonDemo2">
        <br>
        <span id="result2"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 3</legend>
        <input type="text" id="fullName2">
        <input type="button" value="Demo 3" id="buttonDemo3">
        <br>
        <span id="result3"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 4</legend>
        <input type="button" value="Demo 4" id="buttonDemo4">
        <br>
        <span id="result4"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 5</legend>
        <input type="button" value="Demo 5" id="buttonDemo5">
        <br>
        <table border="1" id="tableProducts">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </fieldset>

</body>

</html>
<?php

Route::get('/', 'DemoController@index');
Route::get('/demo', 'DemoController@index');
Route::get('/demo/index', 'DemoController@index');
Route::get('/demo/ajax1', 'DemoController@ajax1');
Route::get('/demo/ajax2', 'DemoController@ajax2');
Route::get('/demo/ajax3/{fullName}', 'DemoController@ajax3');
Route::get('/demo/ajax4', 'DemoController@ajax4');
Route::get('/demo/ajax5', 'DemoController@ajax5');

Screenshots