Using Ajax and returning json array in laravel 5

Question

I am new to \"AJAX\" and I have been trying to send a request \"ONSELECT\" using \"AJAX

Answer 1

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

Answer 2

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

Answer 3

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",

Answer 4

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];

Answer 5

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

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

Thank U every one for your help

Answer 6

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

1. In routes.php

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

2. In master layout file

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

3. 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);
       }
   });