Laravel & Ajax – Insertion de données dans un tableau sans rafraîchissement

Tout d’abord, je dois dire que je commence à utiliser Ajax … Alors aidez-moi les gars. Je veux insérer les données dans la firebase database sans actualiser la page. Jusqu’ici, j’ai le code suivant … Dans la lame, j’ai un formulaire avec un identifiant:

{!! Form::open(['url' => 'addFavorites', 'id' => 'ajax']) !!}  id}}">   {!! Form::close() !!}

Et dans le contrôleur j’ai:

 public function addFavorites() { $idUser = Input::get('idUser'); $idArticle = Input::get('idArticle'); $favorite = new Favorite; $favorite->idUser = $idUser; $favorite->idArticle = $idArticle; $favorite->save(); if ($favorite) { return response()->json([ 'status' => 'success', 'idUser' => $idUser, 'idArticle' => $idArticle]); } else { return response()->json([ 'status' => 'error']); } }

J’essaie avec ajax d’insérer dans la firebase database:

  $('#ajax').submit(function(event){ event.preventDefault(); $.ajax({ type:"post", url:"{{ url('addFavorites') }}", dataType="json", data:$('#ajax').serialize(), success: function(data){ alert("Data Save: " + data); } error: function(data){ alert("Error") } }); });

Aussi dans mon web.php j’ai un itinéraire pour append des favoris. Mais lorsque je soumets le formulaire, il me renvoie une réponse JSON comme {"status":"success","idUser":"15","idArticle":"343970"} : {"status":"success","idUser":"15","idArticle":"343970"} … Il est en fait inséré dans la firebase database, mais je veux que la page ne recharge pas. Juste pour afficher la boîte d’alerte.

Comme @sujivasagam dit qu’il effectue une action post régulière. Essayez de remplacer votre javascript par ceci. J’ai aussi reconnu une erreur de syntaxe, mais elle est corrigée ici.

 $("#ajax").click(function(event) { event.preventDefault(); $.ajax({ type: "post", url: "{{ url('addFavorites') }}", dataType: "json", data: $('#ajax').serialize(), success: function(data){ alert("Data Save: " + data); }, error: function(data){ alert("Error") } }); });

Vous pouvez simplement remplacer par et vous n’aurez probablement pas besoin de event.preventDefault() qui empêche la publication du formulaire.

MODIFIER

Voici un exemple d’obtention et de publication de contenu avec JavaScript, comme demandé dans les commentaires.

 (function() { // Loads items into html var pushItemsToList = function(items) { var items = []; $.each(items.data, function(i, item) { items.push(''+item.title+'
'); }); $('#the-ul-id').append(items.join('')); } // Fetching items var fetchItems = function() { $.ajax({ type: "GET", url: "/items", success: function(items) { pushItemsToList(items); }, error: function(error) { alert("Error fetching items: " + error); } }); } // Click event, adding item to favorites $("#ajax").click(function(event) { event.preventDefault(); $.ajax({ type: "post", url: "{{ url('addFavorites') }}", dataType: "json", data: $('#ajax').serialize(), success: function(data){ alert("Data Save: " + data); }, error: function(data){ alert("Error") } }); }); // Load items (or whatever) when DOM's loaded $(document).ready(function() { fetchItems(); }); })();

Vous utilisez le type de bouton “Soumettre” qui soumet généralement le formulaire. Alors faites cela comme bouton et au clic de cet appel la fonction ajax

Changez votre type de bouton en type="button" et ajoutez l’action onclick onclick = “yourfunction ()”. et juste mettre ajax dans votre funciton.

Remplacez le type d’entrée par un bouton et créez un écouteur onClick. Assurez-vous d’utiliser cet identifiant d’entrée dans l’écouteur onclick:

Alors:

 $('#test').on('click', function(event){ event.preventDefault() ... further code

Je voudrais aussi changer l’identifiant pour quelque chose de plus clair.