Tutorial – Insert Update and Delete record with AJAX in Laravel Example

11

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.

Contents

  1. Table structure
  2. Database Configuration
  3. Model
  4. Controller
  5. Route
  6. View

1. Table structure

I am using users table in the example.


2. Database Configuration

Open .env file.

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


3. Model

Create a Page model.

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


4. Controller

Create a PagesController controller.

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


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


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.

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

Leave A Reply

Your email address will not be published.