post data without reloading using ajax laravel 5

Question

I am new to laravel I need to post datas using ajax my question is how do I post data from input in textarea without reloading using ajax in laravel 5? My code so far I dont know what to do next:

routes

<?php


Route::group(['prefix' => 'api'], function() {
    Route::group(['prefix' => 'v1'], function() {
        Route::group(['prefix' => 'cars'], function() {
            Route::get('', function () {
                return App\Car::all();
            });

            Route::post('', function () {
                return App\Car::create(Request::all());
            });

            Route::get('{id}', function ($id) {
                return App\Car::find($id);
            });

            Route::post('{id}', function ($id) {
                return App\Car::find($id)->update(Request::all());
            });
        });
    });
});

Route::get('/ajax', function () {
    return view('index');
});

view

<html>
    <head>
        <title>
            asdf
        </title>
    </head>
    <body>
        <input type="text" id="cars"/>
        <input type="text" id="carowner"/>
        <button class="create-car"> Create </button>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>          
        <script type="text/javascript">


            $(document).ready(function() {
                $.get('/api/v1/cars').success(function(data) {
                    data.forEach(function(car) {
                        console.log(car);
                        $('body').append(car.name + "<br/>");                       
                    });
                }); 
                $('.create-car').click(function() {
                    var g = $("#cars").val();
                    var o = $("#carowner").val();
                    console.log(g);
                    console.log(o);
                    var data = {

                        "name": g,
                        "owner": o


                        })


                    }
                     $.post('/api/v1/cars/', data);
                });     
            });
        </script>
    </body>
</html>

What Error are you getting when opeing dev tools in for example chrome? — Joost
– Joost, Commented Dec 8, 2015 at 8:31

halfer · Accepted Answer · 2016-03-08 08:30:36Z

Posting data with AJAX in Laravel is easy but you must keep in mind that Laravel needs the csrf_token() to be also passed in your data, otherwise an error will occur.

NOTE: the token is normally automatically created by Laravel, but for this you should use the HTML facade. If you don't than you need to put an hidden field in your form like so:

<input type="hidden" name="_token" value="{{ csrf_token() }}">

So that sad, I give you just an example of how to do that:

$.ajax({

    var g = $("#cars").val();
    var o = $("#carowner").val();
    var token = $("#_token").val();
     var postData = {
         _token: token,
         name:  g,
         owner: o
     }      

      url: "/api/v1/cars/'",
            type: "POST",
            dataType: "json",
            data: postData,
        }).done(function(response){


        }

   })

NOTE: This is an AJAX example for Laravel but I didn't check if your routing is correct, or you have your controller and model in place with the needed function in it. If you have everything in place this is the way!

Collectives™ on Stack Overflow

post data without reloading using ajax laravel 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related