Using Ajax and returning json array in laravel 5

Question

enter image description here I am new to "AJAX" and I have been trying to send a request "ONSELECT" using "AJAX" and receive a "JSON" response in "laravel 5".

Here is my View

<select>
<option data-id="a" value="a">a</option>
<option data-id="b" value="b">b</option>
<option data-id="c" value="c">c</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">
$('select').change(function(){
var data = $(this).children('option:selected').data('id');

$.ajax({
    type    :"POST",
    url     :"http://localhost/laravel/public/form-data",
    dataType:"html",
    data    :{ data1:data },

    success :function(response)
    alert("thank u");
    }),
});
</script>

Here is my Controller to receive ajax request

public function formdata(){
    $data = Input::get('data1');

    //somecodes

    return Response::json(array(
                    'success' => true,
                    'data'   => $data
                )); 
}

Here is my Route

 Route::post('form-data',array('as'=>'form-data','uses'=>'FormController@formdata'));

I also have tried to change the URL of ajax with just only form-data and {{Url::route('form-data')}}.

also in laravel 5 the syntax are suppose to change thats the main reason — sujit prasad
– sujit prasad, Commented Feb 20, 2015 at 12:57

Alex · Accepted Answer · 2015-04-22 07:11:03Z

20

Laravel 5 uses csrf token validation for security reasons....try this...

In routes.php

route post('form-data', 'FormController@postform');

In master layout file

<meta name="csrf-token" content="{{ csrf_token() }}" />

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$.ajax({
    url: '/form-data/',
    type: 'POST',
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (data) {
        console.log(data);
    }
});

edited Apr 22, 2015 at 7:11

Alex

78912 silver badges26 bronze badges

answered Apr 22, 2015 at 6:23

sunil sah

5145 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashik Basheer · Accepted Answer · 2015-02-19 07:14:53Z

6

Add error callback to your ajax request to find if an error is thrown,

$.ajax({
  type    :"POST",
  url     :"http://localhost/laravel/public/form-data",
  dataType:"json",
  data    :{ data1:data },
  success :function(response) {
    alert("thank u");
  },
  error: function(e) {
    console.log(e.responseText);
  }
});

its better to use console.log() to see detailed information even if the response is a json string. Try the code and let us know if something is logged to the browser console

edited Feb 19, 2015 at 7:14

answered Feb 19, 2015 at 6:43

Ashik Basheer

1,6014 gold badges18 silver badges36 bronze badges

4 Comments

sujit prasad Over a year ago

still no use but it is also about laravel 5 where some syntax are also changing and was released almost 10 days ago

Ashik Basheer Over a year ago

what response do you get from the controller?

sujit prasad Over a year ago

I am trying to get a json response but in this function no response is returned at execution. I just want the success response but in json

Leonardo Over a year ago

Thank you. I was struggling with this part: error: function(e) { console.log(e.responseText); }

Saqueib · Accepted Answer · 2015-02-19 07:10:11Z

Your jQuery code has syntax error in success callback, that's why its not making any post request to Laravel, please try below javascript it will work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select>
<option data-id="a" value="a">a</option>
<option data-id="b" value="b">b</option>
<option data-id="c" value="c">c</option>
</select>

<script type="text/javascript">
 $(function () {
   	$('select').on('change', function (e) {
 		var data = $(this).children('option:selected').data('id');
	$.ajax({
		type    :"POST",
    	dataType:"json",
		url     :"http://localhost/laravel/public/form-data",
		data    :{ data1:data },
		success :function(response) {
				alert("thank u");
		}
	});
});
})
</script>

In Laravel , you can just return array or object and it will automatically convert it to json response

return ['success' => true, 'data' => $data];

try running php artisan route:list and make sure http://localhost/laravel/public/form-data route is registered, use above code it will work

Pratik Joshi · Accepted Answer · 2015-02-19 06:24:05Z

2

You made error in code ,please write it properly.

$.ajax({
    type    :"POST",
    url     :"http://localhost/laravel/public/form-data",
    dataType:"json",
    data    :{ data1:data },
    success :function(response){
    alert("thank u");
    }
});

Update

I just saw your Returning datatype is json , so use

 dataType:"json",

or

 dataType:"jsonp",

edited Feb 19, 2015 at 6:24

answered Feb 19, 2015 at 6:18

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

2 Comments

sujit prasad Over a year ago

if I add an alert after "var data" it works as alert before ajax but after ajax no response

Pratik Joshi Over a year ago

open Firebug , and open Net tab in it. And edit the question , paste screenshot of giving ajax call .

sujit prasad · Accepted Answer · 2015-02-19 07:36:01Z

1

The problem was type should be "GET" instead of "POST" and

route get('form-data', 'FormController@postform');

Thank U every one for your help

answered Feb 19, 2015 at 7:36

sujit prasad

9452 gold badges14 silver badges29 bronze badges

1 Comment

Ashik Basheer Over a year ago

Great but changing the method of request just because something isn't working is not a good solution. You may check the console to trace the error for post request if you need to learn. Cheers :)

Rashed Hasan · Accepted Answer · 2020-09-14 11:31:29Z

0

Better if you are sending all form data then use data: $(this).serialize() in ajax, and inside form use {{ csrf_field() }}

edited Sep 14, 2020 at 11:31

Rashed Hasan

3,77111 gold badges43 silver badges91 bronze badges

answered Sep 20, 2016 at 7:04

Vipin

512 silver badges4 bronze badges

Collectives™ on Stack Overflow

Using Ajax and returning json array in laravel 5

6 Answers 6

Comments

4 Comments

1 Comment

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

1 Comment

2 Comments

1 Comment

Comments

Linked

Related