Laravel 6 JQuery Ajax Post Request Example

Today, We want to share with you Laravel 6 Ajax Post Request Example.In this post we will show you Laravel 6.2 Ajax CRUD (Operation) Application Example, hear for JQuery Ajax Post Request Example in Laravel 6 we will give you demo and example for implement.In this post, we will learn about Laravel 6 Ajax Form Submit With Validation Tutorial with an example.

Laravel 6 JQuery Ajax Post HTTP Request Example

There are the Following The simple About laravel tutorial for beginners step by step Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 6 Tutorial on Full Text Search using Ajax, so the Laravel 6.0 Create First Ajax CRUD Application from Scratch is used for this example is following below.

Read Also:  Laravel 6 Ajax post data Example

Phase 1: Define a Laravel 6 Routes

routes/web.php

Route::get('guestAjaxReq', '[email protected]');
Route::post('guestAjaxReq', '[email protected]')->name('guestAjaxReq.post');

Phase 2: Create a Laravel 6 Controller

app/Http/Controllers/GuestController.php

<?php
  
namespace App\Http\Controllers;
use Illuminate\Http\Request;
   
class GuestController extends Controller
{
    /**
     * Create a new laravel 6 controller instance.
     *
     * @return void
     */
    public function guestAjaxReq()
    {
        return view('guestAjaxReq');
    }
   
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function guestAjaxReqPost(Request $request)
    {
        $input = $request->all();
        \Log::info($input);
   
        return response()->json(['success'=>'Good Luck, Got Simple jquery Ajax GET, POST Request.']);
    }
   
}

Phase 3: Create a Laravel View Blade File

resources/views/guestAjaxReq.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 6 Ajax Request example - TamilRokers</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 6 Ajax Request example - TamilJioRokers</h1>
  
        <form >
  
            <div class="form-group">
                <label>Guest Name:</label>
                <input type="text" name="name" class="form-control" placeholder="Name" required="">
            </div>
  
            <div class="form-group">
                <label>Guest Password:</label>
                <input type="password" name="password" class="form-control" placeholder="Password" required="">
            </div>
   
            <div class="form-group">
                <strong>Guest Email:</strong>
                <input type="email" name="email" class="form-control" placeholder="Email" required="">
            </div>
   
            <div class="form-group">
                <button class="btn btn-success btn-submit">Submit</button>
            </div>
  
        </form>
    </div>
  
</body>
<script type="text/javascript">
   
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
   
    $(".btn-submit").click(function(e){
  
        e.preventDefault();
   
        var name = $("input[name=name]").val();
        var password = $("input[name=password]").val();
        var email = $("input[name=email]").val();
   
        $.ajax({
           type:'POST',
           url:"{{ route('guestAjaxReq.post') }}",
           data:{name:name, password:password, email:email},
           success:function(data){
              alert(data.success);
           }
        });
  
	});
</script>
   
</html>

Final Output:

[2022-09-22 03:54:19] local.INFO: array (
  'name' => 'jigar Shukla',
  'password' => '[email protected]',
  'email' => '[email protected]',
)  

Web Programming Tutorials Example with Demo

Read :

Read Also:  jQuery Ajax Delete Request with Laravel

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about laravel ajax post data to controller.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Bootstrap table border Examples
  2. Read Also:  Laravel 7 jQuery Ajax Form Validation Example
  3. Read Also:  Laravel 6.2 jQuery AJAX CRUD Tutorial
  4. Read Also:  Laravel 7 jQuery Ajax Request Tutorial
  5. Read Also:  Vuejs nested components
  6. Read Also:  Add Session Array programming with php
  7. Read Also:  Laravel ajax get Request Example From Scratch
  8. Read Also:  VueJS Trim String - VueJS Trim LTrim and RTrim Functions
  9. Read Also:  jQuery Ajax POST example with Laravel 7/6
  10. Read Also:  How to convert string number into month name in PHP