web-dev-qa-db-fra.com

Utilisation de Ajax et retour du tableau json dans laravel 5

enter image description hereJe suis nouveau sur "AJAX" et j'ai essayé d'envoyer une demande "ONSELECT" à l'aide de "AJAX" et recevoir une réponse "JSON" dans "laravel 5".

Voici ma vue

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

Voici mon contrôleur pour recevoir une demande ajax

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

    //somecodes

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

Voici mon itinéraire

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

J'ai aussi essayé de changer l'URL d'ajax avec seulement form-data et {{Url::route('form-data')}}.

javascriptjqueryajaxjsonlaravel-5
10
sujit prasad

Laravel 5 utilise la validation de jeton csrf pour des raisons de sécurité .... essayez ceci ...

  1. Dans routes.php

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

  2. En fichier maître

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

  3. var CSRF_TOKEN = $ ('meta [nom = "jeton de csrf"] "). attr (' contenu ');
    $.ajax({
    url: '/form-data/',
    type: 'POST',
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (data) {
        console.log(data);
    }
});
18
sunil sah

Ajoutez un rappel d'erreur à votre demande ajax pour rechercher si une erreur est générée,

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

il est préférable d’utiliser console.log () pour afficher des informations détaillées même si la réponse est une chaîne json. Essayez le code et laissez-nous savoir si quelque chose est connecté à la console du navigateur.

4
Ashik Basheer

Votre code jQuery a une erreur de syntaxe dans le rappel success, c’est pourquoi il ne fait aucune demande post à Laravel. Veuillez essayer ci-dessous javascript, cela fonctionnera 

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

Dans Laravel, vous pouvez simplement renvoyer array ou object et le convertir automatiquement en réponse json

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

Vous avez commis une erreur dans le code, veuillez l'écrire correctement.

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

Mettre à jour

Je viens de voir que votre type de données Returning est JSON, utilisez donc

 dataType:"json",

ou 

 dataType:"jsonp",
1
Pratik C Joshi

Le problème était que le type devait être "GET" au lieu de "POST" et 

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

Merci à tous pour votre aide

1
sujit prasad

Mieux si vous envoyez toutes les données du formulaire, utilisez data: $ (this) .serialize () dans ajax, et dans le formulaire, utilisez {{csrf_field ()}}

0
Vipin