Using Ajax In Laravel

What is Ajax ?

According to wikipedia, Ajax is a set of Web development techniques using many web technologies on the client side to create asynchronous Web applications. AJAX stands for Asynchronous JavaScript and XML.

We can use ajax to send variety of requests to the server asynchronously. In laravel context, we can use ajax to submit a form, update records, delete data from database. Most common usage is fetching data from database.

Basic Structure

For a basic structure, we have to specify the method. Method can be get, post, patch etc. Now, we have to define route in which we will send request. If we need to send data then, we have to add data in json format. Sometime we may need to add request headers as well. In order to perform associated tasks after call, we can define success and error functions as well.

Along with laravel

We can define a variable base_url in main layout. Value of this can be something like localhost:8000or localhost/project/public/in local server.i.e. document root or project root directory. Let’s define the variable in main javascript as:

As we know, laravel uses csrf token for the post/patch request, we have to append the token while sending such requests. It’s pretty simple add following in head section of html.

Create custom validation rule in Laravel

Now, we can use the value of the above field while sending request. Let’s take an example of article. We will send post request to create new article with title and body. Our structure will be something like this:

Javascript (Ajax)


In above code, _token is used for csrf verification. Type will be post since we want to store the data. A post route is also added where we will send request. Finally, we have to add our data along with token. We can take data from forms as well. Success and error functions are for success or error of an ajax call.

Now, we need a post route and function to store data in the database. Let’s define our post route in web.php

Route

Controller

After this, we will create an store function in ArticlesController

After storing new article to database, we can return a json response along with recently added article.

In the same way, we can create patch request since it also required csrf token verfication. Now let’s take and basic example of getting list of articles from get request.

Javascript

We need basic structure of ajax with type get and route. For get request, we don’t need csrf token. In our case, we don’t need data as well. So, we will send get request to url and then console log the response which contains list of articles.

Route

We need basic get route /articleswhich return articles in json response.

ArticlesController

In the controller, we just fetch all articles from database and then return articles in json response.

It’s quite easy to use ajax in laravel to make variety of request for variety of applications in laravel. We can easily send get, post, patch request from ajax to the server.


sagautam5

sagautam5

Computer Enginner, A Laravel Developer,
http://sagargautam.stacklearning.com

Leave a Reply

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