jQuery AJAX using in Laravel |
X

Congrats, You are Subscribed to Receive Updates.

jQuery AJAX using in Laravel


jQuery AJAX using in Laravel is one of a very useful thing to create interactive applications from the laravel framework. The next level of programming goes with the live results without refreshing and loading again browser.

Laravel Ajax

Here I am going to give you a easy way to use AJAX on your Laravel project , Just follow the steps to create your own.

Let’s begin with Routes, We need to route the variable which we are going to use in our demo.

//Options: show create options form
Route::get( '/options/new', array(
    'as' => 'options.new',
    'uses' => 'OptionsController@add'
) );
 
//Options: create a new setting
Route::post( '/options', array(
    'as' => 'options.create',
    'uses' => 'OptionsController@create'
) );

Than move to create the view class and to show a form to receive data.

{{ Form::open( array(
    'route' => 'options.create',
    'method' => 'post',
    'id' => 'form-add-a-option'
) ) }}

 /* Option label to describe the form field */ 
{{ Form::label( 'option_name', 'Option Name:' ) }}
{{ Form::text( 'option_name', '', array(
    'id' => 'kv_option_name',
    'placeholder' => 'Enter Option Name',
    'maxlength' => 20,
    'required' => true,
) ) }}

/* Get the option value using a textbox */
{{ Form::label( 'option_value', 'Option Value:' ) }}
{{ Form::text( 'option_value', '', array(
    'id' => 'kv_option_value',
    'placeholder' => 'Enter Option Value',
    'maxlength' => 30,
    'required' => true,
) ) }}
 //Finally form submit...
{{ Form::submit( 'Save Option', array(
    'id' => 'btn-add-option',
) ) }}
 
{{ Form::close() }}

Than write the Controller class to take care of the save and creating new option work.

class OptionsController extends BaseController {   
    public function add() {
        return View::make( 'options/new' );
    }
    
    public function create() {
        //check if its our form
        if ( Session::token() !== Input::get( '_token' ) ) {
            return Response::json( array(
                'msg' => 'Unauthorized attempt to create option'
            ) );
        }
 
        $option_name = Input::get( 'option_name' );
        $option_value = Input::get( 'option_value' );        
 
        $response = array(
            'status' => 'success',
            'msg' => 'Option created successfully',
        );
 
        return Response::json( $response );
    }
}

And Here is the JS function to handle the AJAX calls.

jQuery(document).ready(function($){
 
    $('#form-add-a-option').on('submit', function(){ 
				 
       // ajax post method to pass form data to the 
        $.post(
            $(this).prop('action'),        {
                "_token": $( this ).find( 'input[name=_token]' ).val(),
                "option_name": $( '#kv_option_name' ).val(),
                "option_value": $( '#kv_option_value' ).val()
            },
            function(data){
                //response after the process. 
            },
            'json'
        ); 
       
        return false;
    }); 
});

That’s it. for  Laravel ajax calls, Instead of direct php access. We pass the data through AJAX . Try this if you have any doubt comment below.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

17 comments

  1. commenter

    can i ask how to pass parameters to that ajax request? thanks

  2. commenter

    Very thanks to you. Nice tutorial

  3. commenter

    Great. Learn from it. Just make my search must faster.

  4. commenter

    Hi

    Great, simple, clear tutorial, Thanks.

    How do you do pass back validation errors to the form via Response::json, and how would you display them in the view?

  5. commenter

    Very Useful…..tested Okay…

  6. commenter

    If we have a form with multiple submit buttons, how we let the Controller Action/JQuery Method know which submit we used? For controller actions I’ve always used if(Input::get(‘button1’)), but that is not working when I include JQuery AJAX.

  7. commenter

    I have two tables one of state and second is of city and I have a relation of states with cities and I want to fetch all the cities according to states through ajax. Please tell me how I do it.

  8. commenter

    I’ll give it a try

  9. commenter

    After using your code all I got was blank screen and this: {“status”:”success”,”msg”:”Option created successfully”}
    How to make the code actually work?
    Thx.

  10. commenter

    Hi, thanks , but how do we retrieve data from ajax In a view file ? do we need to change something while retrieving db row ? Or it stays the same as regular laravel fetching $user->username ?

  11. commenter

    how do i send the formData with this code?

Reply to Varadharaj V Cancel reply

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

*

Current ye@r *

Menu

Sidebar