[JAVA] Fonction de publication implémentée par communication asynchrone dans Rails

introduction

Cette fois, nous allons implémenter la fonction de publication par communication asynchrone. Cette fois, afin de nous concentrer sur l'exécution du traitement asynchrone, nous partirons de l'état où la fonction d'affichage avec transition d'écran est déjà implémentée. Afin de comprendre js, il sera décrit en js. De plus, comme je suis débutant, j'apprécierais que vous signaliez des erreurs.

Étape 1 Ajouter une télécommande: ture

Ajoutons remote: ture au formulaire de saisie!

<%#Formulaire d'entrée de tâche%>
<div class="task-contents">
    <%= form_with model: @category, id: 'new_tasks', class: 'new_tasks' do |f| %>
     <div class="task-field">
       <%= f.text_field :task %>
     </div>
     <div class="task-actions">
       <%= f.submit "+" %>
     </div>
    <% end %>
</div>

Où est distant: ture ici? Je pense que certaines personnes pensent que lorsque form_with est utilisé, la communication ajax est effectuée par défaut, donc aucune description particulière n'est requise lors de l'utilisation de form_with. Inversement, si vous ne souhaitez pas utiliser la communication ajax, définissez local: true pour effectuer une requête normale. Si vous utilisez form_for, n'oubliez pas d'ajouter l'option remote: true. Si vous êtes inquiet, vous devriez le vérifier avec un outil de développement, etc., et il devrait être data-remote = "true".

Étape 2 Décrivez le contrôleur

def create
      @category = Category.new(category_params)
      @category.save
      @categories = current_user.categories.all
end

Bien qu'il s'agisse d'une description qui exécute une fonction de sauvegarde générale, la description de @categories = current_user.categories.all est décrite car elle est nécessaire comme information à transmettre à js après cela.

Étape 3 Écrivez JavaScript dans create.js.erb

Créez le fichier create.js.erb car le contenu renvoyé par remote: true est défini pour lire le fichier action name.js.erb au lieu de HTML.

(function(){
  document.querySelector(".task-lists").innerHTML =  '<%= j(render 'categories/index', categories: @categories) %>'
  document.querySelector("#category_task").value = ''
})();

Je réécris le contenu du HTML avec .innerHTML.

'<%= j(render 'categories/index', categories: @categories) %>' Ici, nous l'avons défini à l'étape 2 pour passer @categories. document.querySelector("#category_task").value = '' Cette description laisse le formulaire de saisie vide.

finalement

Ceci termine la fonction de publication asynchrone! L'important est que si vous pouvez comprendre le flux de données de la communication ajax, chaque processus est simple et facile à comprendre. Puisqu'il s'agit d'un débutant, j'apprécierais si vous pouviez m'apprendre s'il y a une meilleure description.

Si vous aimez les articles tels que la suppression asynchrone, veuillez ~ https://qiita.com/shantianchengyilang316/items/10ab2d84f6cfcfd29def