Use of Ajax in Laravel

So now you will learn how to use ajax with Laravel.

– First let’s create a view that’s going to have a form that you are going to be using to send the request, so before this build a route first then build a view of form.

– Build a form and attach a click event to form with javascript and use Jquery in JavaScript and with that execute an ajax function to actually send the request via Javascript to the server.

< form action=”/store” method=”post” enctype=”multipart/form-data”>
{{csrf_field()}}
< div class=”form-group”>
     < input type=”file” name=”file” class=”form-control”>
< /div>
< div class=”form-group”>
< input type=”submit” class=”form-control”>
< /div>
< /form>

– You can send back a response to front end which is HTML from the server.

– Submit form with javascript, use Ajax to send the request to the server from the server you send back the response to the front-end

– With this in your project file as web.php make the routes to get and post the request as-:

Route::get (‘/ajax-form’, ‘homecontroller@ajax_form’);

Route::post (‘ajax’,’HomeControllerajax’);

Now go to “homecontroller.php” file and attach that public function as-:

Public function ajax_form(){

Return view (‘ajax-form’);

So now in view directory, you are going to create another blade file called as jets.

Now open another file in browser of ajax file as “coding.test/ajax-form”and there will form is shown as-:

– So next step is attaching JavaScript to Ajax-form. Before this just makes sure that it works first before you attach it. Just make sure that document is loading with Jquery script and as follows-:

Jquery has a really cool functionality that has a document in browser having ready function that you can use. So from google > cdnjs jquery > copy JQuery and in ajax-form file add script-:

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

Now you got the Jquery here using version 3.3.1. Now attach the document by using ready function and make sure that everything has to load it as-:

< script>
    $ (document).ready (function() {
          Console.log(‘HI’);
})
< /script>

Now go back to browser and check by reload the page and the output is-:

So in the console “hii” is shown, so the document is loading, so now you can attach the ajax form.

There different ways to test with Jqyery. You can attach a jquery need for a function that is going to detect when the function was formed when submitted the form.

– You can also attach a listener to the native submit method or a function that JavaScript has or you can simply attach a listener or can say ajax listener with an ID as-:

< input type=”submit” class=”form-control” id=”ajax-submit”>

So here event listener is attaching to submit button and write ajax jquery again down in script as-:

So with this as when you usually click the submit before writing this jquery the page will refresh because you are using javascript, you don’t need to send the request via the forum and after writing this jquery the page will not refresh on clicking the submit button.

  1. Now if you want to set up the default settings for ajax, the you are about to use ajax, send to ajax and so on.
  2. – So header set up is first done with ajax reason is you want to set that up is because there are always some errors exist when you set up post request using Ajax. As while doing installation “csrf field” is used in case of security purpose.

    – Before sending any request there ajax header set up to avoid error by providing value as well as-:

So when you do php artisan for authentication in Laravel as there is register button in which key authentication is needed. And so on …

Copyright 1999- Ducat Creative, All rights reserved.