Use ajax javascript in laravel 11

 <?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        return view("show");
    }

    public function ajaxCall()
    {
        $data = array("one", "two", "three");
        return response()->json(["data" => $data]);
    }
}
Above File is app\Http\Controllers\UserController.php File





Above File is app\Models\User.php File
<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    /** @use HasFactory<\Database\Factories\UserFactory> */
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var list<string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var list<string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}






Below File is resources\views\show.blade.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Show</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-10">
                <div class="card">
                    <div class="card-header">
                        <h3>Ajax</h3>
                        <p id="data"></p>
                    </div>
                    <div class="card-body">
                        <button onclick="ajaxCall()" class="btn btn-success">Click to Ajax Call</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function ajaxCall()
        {
            document.getElementById("data").innerHTML = "";
            var req = new XMLHttpRequest();

            req.open("GET","/ajax-call",true);
            req.send();

            req.onreadystatechange = function(){
                if(req.readyState == 4 && req.status == 200) {
                    // console.log(req.responseText);
                    var data = JSON.parse(req.responseText);
                    for(let i=0;i<data.data.length;i++) {
                        console.log(i);
                        document.getElementById("data").innerHTML += " " + data.data[i];
                    }
                }
            }
        }
    </script>
</body>
</html>





Below File is routes\web.php File
<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::controller(UserController::class)->group(function () {
    Route::get("/show", "index");

    Route::get("/ajax-call", "ajaxCall");
});


Comments

Post a Comment

Popular posts from this blog

Eloquent Many to Many Relationship Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ User ; use Illuminate\Http\ Request ; class UserController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // $users = User::find(2);         // return $users;         // $users = User::with("roles")->get();         // return $users;         // $users = User::find(1);         // return $users->roles;         // $users = User::find(1);         // foreach($users->roles as $data) {         //     echo $data->role_name . "<br>";         // }         // To show All users data as shown below :         $users = User :: get ();...
Read more

Eloquent with JSON Data Columns Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ Test ; use Illuminate\Http\ Request ; class TestController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // Read first record from database         // $test = Test::find(1);         // return $test->meta_data;         // Read all records from database         // $test = Test::get();         // return $test;         // Order all records based on name         // $test = Test::orderBy("meta_data->name")->get();         // return $test;         // Read only "name" value of any particular record from database         // $test = Test::find(1);     ...
Read more

Blade Template Tutorial Three Template Inheritance in Laravel 11

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Master Layout - @yield ( "title" , "Website" ) </ title >     {{-- Below "asset('css/style.css')" is for declaring Absolute Path and "asset() is helper function for Absolute Path" --}}     < link rel = "stylesheet" href = " {{ asset ('css/style.css') }} " > </ head > < body >     < div id = "wrapper" >         < header >             < h1 > Hello World </ h1 >         </ header >         < nav >             < a href = "/welcomeT...
Read more