Insert Update and Delete record with AJAX in Laravel

AJAX is use to communicate with the server and perform action like – database manipulation, file upload, etc. without the need to refresh whole page.

In this tutorial, I show how you can use jQuery AJAX to insert, update, and delete records in Laravel.

Insert Update and Delete record with AJAX in Laravel


Contents

  1. Table structure
  2. Database Configuration
  3. Model
  4. Controller
  5. Route
  6. View
  7. Output
  8. Conclusion

 


1. Table structure

I am using users table in the example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Database Configuration

Open .env file.

Specify the host, database name, username, and password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

3. Model

Create a Page model.

php artisan make:model Page

Here, create 4 methods –

  • getuserData – Select all records from users table and return it.
  • insertData – Check if username already exists in users table or not. If not then insert the record and return the insertid otherwise return 0.
  • updateData – Update record according to passed $id.
  • deleteData – Delete record from the users table according to passed $id.

Completed Code

<?php

namespace App;
use Illuminate\Support\Facades\DB;
use Illuminate\Database\Eloquent\Model;

class Page extends Model {

   public static function getuserData($id=null){

     $value=DB::table('users')->orderBy('id', 'asc')->get(); 
     return $value;

   }

   public static function insertData($data){

     $value=DB::table('users')->where('username', $data['username'])->get();
     if($value->count() == 0){
       $insertid = DB::table('users')->insertGetId($data);
       return $insertid;
     }else{
       return 0;
     }

   }

   public static function updateData($id,$data){
      DB::table('users')->where('id', $id)->update($data);
   }

   public static function deleteData($id=0){
      DB::table('users')->where('id', '=', $id)->delete();
   }

}

4. Controller

Create a PagesController controller.

php artisan make:controller PagesController

Here, create 5 methods –

  • index – Load index view.
  • getUsers – This method is used to handle AJAX request. Fetch records by calling getuserData() method and assign in $userData['data']. Return JSON response.
  • addUser – This method is used to handle AJAX request to insert a new record. Read values and initialize $data. Call insertData where pass $data. If record successfully inserted then return insert id otherwise 0.
  • updateUser – This method is used to handle AJAX request to update record. Read values and initialize $data. Call updateData() method where pass $editid and $data for update record.
  • deleteUser – This method is used to handle AJAX request to delete a record. Call deleteUser() method where pass $id.

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Page;

class PagesController extends Controller {
  public function index(){
    return view('index');
  }

  // Fetch records
  public function getUsers(){
    // Call getuserData() method of Page Model
    $userData['data'] = Page::getuserData();

    echo json_encode($userData);
    exit;
  }

  // Insert record
  public function addUser(Request $request){

    $name = $request->input('name');
    $username = $request->input('username');
    $email = $request->input('email');

    if($name !='' && $username !='' && $email != ''){
      $data = array('name'=>$name,"username"=>$username,"email"=>$email);

      // Call insertData() method of Page Model
      $value = Page::insertData($data);
      if($value){
        echo $value;
      }else{
        echo 0;
      }

    }else{
       echo 'Fill all fields.';
    }

    exit; 
  }

  // Update record
  public function updateUser(Request $request){

    $name = $request->input('name');
    $email = $request->input('email');
    $editid = $request->input('editid');

    if($name !='' && $email != ''){
      $data = array('name'=>$name,"email"=>$email);

      // Call updateData() method of Page Model
      Page::updateData($editid, $data);
      echo 'Update successfully.';
    }else{
      echo 'Fill all fields.';
    }

    exit; 
  }

  // Delete record
  public function deleteUser($id=0){
    // Call deleteData() method of Page Model
    Page::deleteData($id);

    echo "Delete successfully";
    exit;
  }
}

5. Route

Open router/web.php file.

Here, define 5 routes –

  • /
  • /getUsers – This is get type route use in jQuery AJAX to load records.
  • /addUser – This is post type route use in jQuery AJAX to insert a record.
  • /updateUser – This is post type route use in jQuery AJAX to update record.
  • /deleteUser/{id} – This is get type route use in jQuery AJAX to delete record and it takes one argument.

Completed Code

<?php

Route::get('/', 'PagesController@index');
Route::get('/getUsers', 'PagesController@getUsers');
Route::post('/addUser', 'PagesController@addUser');
Route::post('/updateUser', 'PagesController@updateUser');
Route::get('/deleteUser/{id}', 'PagesController@deleteUser');

6. View

Create a new index.blade.php file in resources/views/ directory.

Download jQuery library and store in public/js/ directory or you can use CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Add csrf_token() in <meta> and include jQuery library script.

Create <table > for displaying the user list. Add row in <tbody> with 3 textboxes and a button for inserting a record with jQuery AJAX.

Script

Read csrf_token from <meta > tag and assign in CSRF_TOKEN variable.

  • Fetch records –

Create fetchRecords() function which called on document ready state.

From here send AJAX GET request to "getUsers". On successful callback empty the <tbody> rows except the first row.

Loop on the response data and read values. Create new <tr > and add input element for value edit in <td >. Also, add update and delete button to send AJAX request on click.

Append new <tr > in <tbody>.

  • Add record –

On add button click read input values from the first row and send AJAX POST request to "addUser" where pass CSRF_TOKEN, username, name, and email as data.

On successful callback if response>0 then add new row in <tbody >.

  • Update record –

On update button click get the edit id from data-id and read name and email.

Send AJAX POST request to "updateUser" where pass CSRF_TOKEN, editid, name, and email as data.

  • Delete record –

On delete button click send AJAX GET request to "deleteUser" and delete id from data-id. On successful callback remove the <tr>.

Completed Code

<!DOCTYPE html>
<html>
  <head>
    <title>Insert Update and Delete record with AJAX in Laravel</title>
    <!-- provide the csrf token -->
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- jQuery CDN -->
    <script src="{{asset('js/jquery-3.3.1.min.js')}}"></script>
  </head>
  <body>

    <table border='1' id='userTable' style='border-collapse: collapse;'>
      <thead>
        <tr>
          <th>Username</th>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type='text' id='username'></td>
          <td><input type='text' id='name' ></td>
          <td><input type='text' id='email' ></td>
          <td><input type='button' id='adduser' value='Add'></td>
        </tr>
      </tbody>
    </table>

<!-- Script -->
<script type='text/javascript'>
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$(document).ready(function(){

  // Fetch records
  fetchRecords();

  // Add record
  $('#adduser').click(function(){

    var username = $('#username').val();
    var name = $('#name').val();
    var email = $('#email').val();

    if(username != '' && name != '' && email != ''){
      $.ajax({
        url: 'addUser',
        type: 'post',
        data: {_token: CSRF_TOKEN,username: username,name: name,email: email},
        success: function(response){

          if(response > 0){
            var id = response;
            var findnorecord = $('#userTable tr.norecord').length;

            if(findnorecord > 0){
              $('#userTable tr.norecord').remove();
            }
            var tr_str = "<tr>"+
            "<td align='center'><input type='text' value='" + username + "' id='username_"+id+"' disabled ></td>" +
            "<td align='center'><input type='text' value='" + name + "' id='name_"+id+"'></td>" +
            "<td align='center'><input type='email' value='" + email + "' id='email_"+id+"'></td>" +
            "<td align='center'><input type='button' value='Update' class='update' data-id='"+id+"' ><input type='button' value='Delete' class='delete' data-id='"+id+"' ></td>"+
            "</tr>";

            $("#userTable tbody").append(tr_str);
          }else if(response == 0){
            alert('Username already in use.');
          }else{
            alert(response);
          }

          // Empty the input fields
          $('#username').val('');
          $('#name').val('');
          $('#email').val('');
        }
      });
    }else{
      alert('Fill all fields');
    }
  });

});

// Update record
$(document).on("click", ".update" , function() {
  var edit_id = $(this).data('id');

  var name = $('#name_'+edit_id).val();
  var email = $('#email_'+edit_id).val();

  if(name != '' && email != ''){
    $.ajax({
      url: 'updateUser',
      type: 'post',
      data: {_token: CSRF_TOKEN,editid: edit_id,name: name,email: email},
      success: function(response){
        alert(response);
      }
    });
  }else{
    alert('Fill all fields');
  }
});

// Delete record
$(document).on("click", ".delete" , function() {
  var delete_id = $(this).data('id');
  var el = this;
  $.ajax({
    url: 'deleteUser/'+delete_id,
    type: 'get',
    success: function(response){
      $(el).closest( "tr" ).remove();
      alert(response);
    }
  });
});

// Fetch records
function fetchRecords(){
  $.ajax({
    url: 'getUsers',
    type: 'get',
    dataType: 'json',
    success: function(response){

      var len = 0;
      $('#userTable tbody tr:not(:first)').empty(); // Empty <tbody>
      if(response['data'] != null){
        len = response['data'].length;
      }

      if(len > 0){
        for(var i=0; i<len; i++){

          var id = response['data'][i].id;
          var username = response['data'][i].username;
          var name = response['data'][i].name;
          var email = response['data'][i].email;

          var tr_str = "<tr>" +
          "<td align='center'><input type='text' value='" + username + "' id='username_"+id+"' disabled></td>" +
          "<td align='center'><input type='text' value='" + name + "' id='name_"+id+"'></td>" + 
          "<td align='center'><input type='email' value='" + email + "' id='email_"+id+"'></td>" +
          "<td align='center'><input type='button' value='Update' class='update' data-id='"+id+"' ><input type='button' value='Delete' class='delete' data-id='"+id+"' ></td>"+
          "</tr>";

          $("#userTable tbody").append(tr_str);

        }
      }else{
        var tr_str = "<tr class='norecord'>" +
        "<td align='center' colspan='4'>No record found.</td>" +
        "</tr>";

        $("#userTable tbody").append(tr_str);
      }

    }
  });
}
</script>

  </body>
</html>

7. Output


8. Conclusion

Create your methods in the controller to handle AJAX request and return response. If you want to send POST request from AJAX request then you need to also pass CSRF_TOKEN in data.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  • 3
  •  
  •  
  •  
  •  
  •  

5 Comments

  1. Rajeev Tyagi said:

    Hi Yogesh, your helping work is very good

    Thanks

    August 10, 2018
    Reply
  2. Justina Ng said:

    Hi Yogesh. Your work is Splendid and awesome. Thanks alot.
    Please sir, I need little clarification. I see how you are passing CSRF as per code below..

    data: {_token: CSRF_TOKEN,username: username,name: name,email: email},

    Here is my confusion Sir as am security conscious
    1.) At the Model or Controller, I did not see where you are checking if the token sent by user is the same with the token on the Laravel Session.
    2) According the article on this site
    https://engageinteractive.co.uk/blog/csrf-protection-with-ajax-and-laravel
    it does the token checking at the backend (Controller).
    by editing app/filters.php. here we are running laravel 5.7.8 based on your tutorials.
    According to the above site article, it says that if you pass the ajax token with underscore as per _token that Laravel seemed to strip it out of the headers.

    Please Sir, what do we do as to make sure that CSRF attack is overcome with laravel. Thanks for your good work and time. Hoping to hear from you soonest. God bless uuuuuu

    October 11, 2018
    Reply
    • Yogesh Singh said:

      Hi Justina,
      In Laravel 5 CSRF token check is a lot more flexible. It now uses VerifyCsrfToken middleware which is included in the web middleware group. You can find it in app/http/kernel.php file.

      This middleware is added to all web routes that means Laravel by default check for a valid CSRF token using the VerfiyCsrfToken class.

      When the server receives POST requests, the server checks for a CSRF token. If the POST request has a token that matches the active existing CSRF token created by the framework, the form is processed. If not, the form is not processed and an error is sent back to the client making the request.

      According to your shared article where it is defining a filter for CSRF token in Laravel 4.

      That doesn’t require in Laravel 5.

      October 12, 2018
      Reply
  3. amit sankhyan said:

    routes are wrong

    October 27, 2018
    Reply
    • Yogesh Singh said:

      Hi Amit,
      Can you tell me which route is wrong?

      October 27, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *