Insert data using javascript ajax in laravel 11
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index()
{
return view("form");
}
public function saveData($name, $email, $rollno)
{
$user = new User;
$user->name = $name;
$user->email = $email;
$user->rollno = $rollno;
$user->save();
return response()->json(["data" => "success"]);
}
}
Above File is app\Http\Controllers\UserController.php FileBelow 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;
public $timestamps = true;
protected $table = "users";
/**
* The attributes that are mass assignable.
*
* @var list<string>
*/
protected $fillable = [
'name',
'email',
'rollno',
];
/**
* 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 database\json\users.json File
[
{
"name": "sandeep",
"email": "sandeep@gmail.com",
"rollno": 123
},
{
"name": "kuldeep",
"email": "kuldeep@gmail.com",
"rollno": 1234
},
{
"name": "rahul",
"email": "rahul@gmail.com",
"rollno": 123456
},
{
"name": "test",
"email": "test@gmail.com",
"rollno": 123456
},
{
"name": "test1",
"email": "test1@gmail.com",
"rollno": 3211
},
{
"name": "example",
"email": "example@gmail.com",
"rollno": 12345678
}
]
Below File is database\migrations\2025_01_09_130029_create_users_table.php File
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string("name");
$table->string("email", 50)->unique();
$table->unsignedBigInteger("rollno");
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('users');
}
};
Below File is database\seeders\DatabaseSeeder.php File
<?php
namespace Database\Seeders;
use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*/
public function run(): void
{
// User::factory(10)->create();
// User::factory()->create([
// 'name' => 'Test User',
// 'email' => 'test@example.com',
// ]);
$this->call([
UserSeeder::class
]);
}
}
Below File is database\seeders\UserSeeder.php File
<?php
namespace Database\Seeders;
use App\Models\User;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\File;
class UserSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
$json = File::get(path: "database\json\users.json");
$users = collect(json_decode($json));
$users->each(function ($user) {
User::create([
"name" => $user->name,
"email" => $user->email,
"rollno" => $user->rollno
]);
});
}
}
Below File is resources\views\form.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>Form</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 mt-4">
<div class="col-10">
<div class="card">
<div class="card-header">
<h3>Enter User Data</h3>
</div>
<div class="card-body">
<form onsubmit="return submitData()">
@csrf
<label for="name" class="form-label">Name</label>
<input type="text" name="name" id="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" placeholder="Enter name" required/><br>
<span class="text-danger">
@error("name")
{{ $message }}
@enderror
</span>
<label for="email" class="form-label">Email</label>
<input type="email" name="email" id="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" placeholder="Enter email" required/><br>
<span class="text-danger">
@error("email")
{{ $message }}
@enderror
</span>
<label for="rollno" class="form-label">Roll No</label>
<input type="number" name="rollno" id="rollno" value="{{ old('rollno') }}" class="form-control @error('rollno') is-invalid @enderror" placeholder="Enter rollno" required/><br>
<span class="text-danger">
@error("rollno")
{{ $message }}
@enderror
</span>
<input type="submit" value="Save" class="btn btn-primary"/><br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function submitData()
{
console.log("hello");
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var rollno = document.getElementById("rollno").value;
var req = new XMLHttpRequest();
req.open("GET","/save-data/"+name+"/"+email+"/"+rollno,true);
req.send();
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
var obj = JSON.parse(req.responseText);
console.log(obj);
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("rollno").value = "";
}
}
return false;
}
</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("/form", "index");
Route::get("/save-data/{name}/{email}/{rollno}", "saveData");
});
.png)
.png)
.png)
.png)
Comments
Post a Comment