Learn REST API jQuery | Ajax | Laravel | Practical example
This video tutorial is about sending a simple HTTP request using Jquery Ajax and REST API in Laravel.
Assumption:
01. You have already configured your local host.
02. Save an input value in the database using HTTP PUT request and REST API. You can use the same way for other methods (GET, DELETE, etc) as well.
03. This tutorial will be using the XAMP. Both frontend and backend-server are in the htdocs directory.
----FRONTEND application---
01. Make your basic folder structure for the frontend in the htdocs directory.
02. Download jquery
02.01. Go to the jquery.com
02.02. Click on the download button
02.03. Put the download and extracted Jquery library in the js directory that we have already created.
03. Open index.html
04. Link jquery.
05. Create 3 input fields to get inputs from the user(name, email, password).
06. Create a button to submit that inputs
07.Create span elements to display error messages from the backend-server
07. Create a click event for the submit button and create the ajax HTPP request.
-----BACKEND-SERVER------
Use the following steps to create a PUT API endpoint if you don't have one.
01.Create a new MySQL database called ApiTest
02. Create(Download) a new Laravel project (That will be used as the backend server)
03. Update the .eve file with required values
04. Create a controller called CustomerController using the following command
"php artisan make:controller CustomerController"
05. Create a method called customerCreate in CustomerController
06. Create the required REST API endpoint in the api.php file
07. Update AppServiceProvider with the following lines
use Illuminate\Support\Facades\Schema; and
Schema::defaultStringLength(191);
08. Do migration using the following command.
"php artisan migrate"
Run the backend server using "php artisan serve" command.
09. Check the created REST API endpoint using the postman if required.
-----Test with the frontend application-----
To escape the 'Access-Control-Allow-Origin' header is present on the requested resource error, ddd the following lines in the api.php file.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization, X-Auth-Token');
header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');