ajax post in laravel

Question

I know this may be a trivial question but I am just not able to get this ajax call to work..

View (html)

  <div class="col-sm-6 col-xs-3 pl0" style="margin-left: -5px;">
     <button class="btn btn-primary visible-xs" name="btn-callback"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
     <button class="btn btn-primary hidden-xs" name="btnCallback" id="btnCallback"><i class="fa fa-arrow-right" aria-hidden="true"></i> Instant Callback
    </button>
</div>

now I am placing a click event on btnCallback button

JQuery code

$('#btnCallback').click(function () {
            var phone = document.forms["frm-callback"]["callphone"].value;
            if (phone.length != 10) {
                document.getElementById('errcallbackModal').innerHTML = "Enter 10 digit Phone number";
                return false;
            } else if (isNaN(phone)) {
                document.getElementById('errcallbackModal').innerHTML = "Please Enter only number";
                return false;
            } else {
                document.getElementById('errcallbackModal').innerHTML = "";

                var randomnum = Math.floor(100000 + Math.random() * 900000)
                randomnum = randomnum.toString().substring(0, 5);
                var fullNumber = '0091' + phone;

                url = '/ambulance/type2/sendOtp';
                data = {
                    Code: randomnum,
                    MobNumber: fullNumber,
                };

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                console.log(fullNumber);
                $.ajax({
                    url: url,
                    data: data,
                    type: 'POST',
                    datatype: 'JSON',
                    success: function (response) {
                        if (response.status === true) {
                            console.log(response.message);
                            $('#myModalCallback').modal('toggle');
                        } else {
                            alert('Issue');
                        }
                    },
                    error: function (response) {
                        $('#errormessage').html(response.message);
                    }
                });
            }
        });
    </script>

web.php (routes)

Route::post('/ambulance/type2/sendOtp', 'AmbulanceController@sendOtp');

Controller

public function sendOtp()
    {
        $code = Input::get('Code');
        $mobnum = Input::get('MobNumber');

        //set otp code in session to verify
//        session(['verifyOtp' => $code]);
//        ParseCloud::run('sendcode', ["Code" => $code, 'MobNumber' => $mobnum]);

        return Response::json(['status' => true, 'message' => 'OTP has been sent to your mobile number']);
    }

It's not entering the success callback. There is some trivial mistake with the code but I am not able to figure it out.

Any assistance will be highly appreciated.

Answer 1

I tried the below code and it worked .. hope it helps somebody

$.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '<?= csrf_token() ?>'
                }
            });

            $.ajax({
                url: '/ambulance/type2/sendOtp',
                data: {'Code': randomnum, 'MobNumber': fullNumber},
                type: 'POST',
                datatype: 'JSON',
                success: function (response) {
                    if (response.status === true) {
                        console.log('success');
                    } else {
                        document.getElementById('errcallbackModalOtp').innerHTML = "Some error occured .. Please try again later";
//                        $('#errcallbackModalOtp').html('Some error occured .. Please try again later');
                    }
                },
                error: function (response) {
                    document.getElementById('errcallbackModalOtp').innerHTML = response.message;
//                    $('#errcallbackModalOtp').html(response.message);
                }
            });

Answer 2

I wanted to just comment, but I can't, so please don't mark my answer as not useful.

You're being redirected and your controller does not give a redirect response. So maybe your route is wrapped into a middleware group redirecting in some cases?

Answer 3

try passing the csrf token in the header (this will only work inside a blade.php file)

also might be worth reading this http://engageinteractive.co.uk/blog/csrf-protection-with-ajax-and-laravel

or researching laravel csrf with ajax

   $.ajax({
        url: url,
        headers: { 'csrftoken' : '{{ csrf_token() }}' },
        data: JSON.stringify(data),
        type: 'POST',
        datatype: 'JSON',
        contentType: 'application/json',
        success: function (response) {
            if (response.status === true) {
                console.log(response.message);
                $('#myModalCallback').modal('toggle');
            } else {
                alert('Issue');
            }
        },
        error: function (response) {
            $('#errormessage').html(response.message);
        }
    });

Answer 4

Add contentType & JSON.stringify(). Try code written below.

$.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            console.log(fullNumber);
            $.ajax({
                url: url,
                data: JSON.stringify(data),
                type: 'POST',
                datatype: 'JSON',
                contentType: 'application/json',
                success: function (response) {
                    if (response.status === true) {
                        console.log(response.message);
                        $('#myModalCallback').modal('toggle');
                    } else {
                        alert('Issue');
                    }
                },
                error: function (response) {
                    $('#errormessage').html(response.message);
                }
            });