Envoyer les données d'un formulaire avec Laravel en utilisant Ajax

Envoyer une requête Ajax dans Laravel avec la méthode post est nécessaire dans un projet. Ici, dans ce tutoriel, nous allons voir comment utiliser la méthode post d'ajax pour envoyer des données au contrôleur de Laravel. Nous pouvons également récupérer


1. Définir des routes

Tout d'abord, vous devez ajouter deux méthodes dans votre fichier web des routes. L'une pour afficher le formulaire et l'autre pour stocker et envoyer la requête au contrôleur.

routes\web.php

Route::get('ajax-request', [AjaxController::class,'create']);
Route::post('ajax-request', [AjaxController::class, 'store']);

 

2. Ajouter les méthodes au contrôleur

Maintenant nous devons mettre à jour deux méthodes dans le contrôleur, si vous n'avez pas créé de contrôleur, exécutez la commande ci-dessous pour créer un nouveau contrôleur.

php artisan make:controller AjaxController

Après avoir créé le contrôleur avec succès, ajoutez le code ci-dessous.

app\Http\Controllers\AjaxController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AjaxController extends Controller
{
public function create()
{

return view('ajax-request');
}

public function store(Request $request)
{
$data = $request->all();

return response()->json(['success'=>'Requête Ajax soumise avec succès']);
}
}

 

2. Création d'un fichier .blade.php

Ensuite, vous devez ajouter un fichier blade ajax-request.blade.php dans votre répertoire views et y mettre le code ci-dessous.

resources\views\ajax-request.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax Post Request Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>

<body>
<div class="container">
<h1>Laravel Ajax Post Request Example with <a href="https://codingdriver.com/">Coding Driver</a></h1>
<span class="success" style="color:green; margin-top:10px; margin-bottom: 10px;"></span>
<form id="ajaxform">
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" placeholder="Enter Name" required="">
</div>

<div class="form-group">
<label>Email:</label>
<input type="email" name="email" class="form-control" placeholder="Enter Email" required="">
</div>

<div class="form-group">
<strong>Mobile Number:</strong>
<input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile" required="">
</div>
<div class="form-group">
<strong>Message:</strong>
<input type="text" name="message" class="form-control" placeholder="Enter Your Message" required="">
</div>
<div class="form-group">
<button class="btn btn-success save-data">Save</button>
</div>
</form>
</div>
</body>
</html>

 

2. Envoyer la requête Ajax

Après avoir créé le fichier blade, ajoutez le code jquery ajax après le dernier div de fermeture de votre fichier blade pour envoyer la requête post à votre contrôleur via ajax.

<script>
$(".save-data").click(function(event) {
event.preventDefault();

let name = $("input[name=name]").val();
let email = $("input[name=email]").val();
let mobile_number = $("input[name=mobile_number]").val();
let message = $("input[name=message]").val();
let _token = $('meta[name="csrf-token"]').attr('content');

$.ajax({
url: "/ajax-request"
, type: "POST"
, data: {
name: name
, email: email
, mobile_number: mobile_number
, message: message
, _token: _token
}
, success: function(response) {
console.log(response);
if (response) {
$('.success').text(response.success);
$("#ajaxform")[0].reset();
}
}
, });
});

</script>

 

Partager cet article

Laravel: Définition des règles de validation de mot de passe par défaut Précédent

Laravel: Définition des règles de validation de mot de passe par défaut

Gérer les migrations Laravel avec une interface grahique Suivant

Gérer les migrations Laravel avec une interface grahique

Commentaires (0)

Soyez le premier à commenter cet article