[JAVA] Buchungsfunktion implementiert durch asynchrone Kommunikation in Rails

Einführung

Dieses Mal werden wir die Buchungsfunktion durch asynchrone Kommunikation implementieren. Dieses Mal beginnen wir, um uns auf die asynchrone Verarbeitung zu konzentrieren, mit dem Zustand, in dem die Buchungsfunktion mit Bildschirmübergang bereits implementiert ist. Um js zu verstehen, wird es in einfachen js beschrieben. Da ich ein Anfänger bin, würde ich es auch begrüßen, wenn Sie auf Fehler hinweisen könnten.

Schritt 1 Remote hinzufügen: ture

Fügen wir dem Eingabeformular remote: ture hinzu!

<%#Aufgabeneingabeformular%>
<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>

Wo ist fern: hier? Ich denke, einige Leute denken, dass bei Verwendung von form_with standardmäßig eine Ajax-Kommunikation durchgeführt wird, sodass bei Verwendung von form_with keine besondere Beschreibung erforderlich ist. Wenn Sie umgekehrt keine Ajax-Kommunikation verwenden möchten, setzen Sie local: true, um eine normale Anforderung zu stellen. Wenn Sie form_for verwenden, vergessen Sie nicht, die Option remote: true hinzuzufügen. Wenn Sie sich Sorgen machen, sollten Sie dies mit einem Entwicklungstool usw. überprüfen und es sollte data-remote = "true" sein.

Schritt 2 Beschreiben Sie den Controller

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

Obwohl es sich um eine Beschreibung handelt, die eine allgemeine Speicherfunktion ausführt, wird die Beschreibung von @categories = current_user.categories.all beschrieben, da diese als Informationen an js übergeben werden muss.

Schritt 3 Schreiben Sie JavaScript in create.js.erb

Erstellen Sie die Datei create.js.erb, da der von remote: true zurückgegebene Inhalt so eingestellt ist, dass die Datei action name.js.erb anstelle von HTML geladen wird.

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

Ich schreibe den Inhalt von HTML mit .innerHTML neu.

'<%= j(render 'categories/index', categories: @categories) %>' Hier haben wir es in Schritt 2 definiert, @categories zu übergeben. document.querySelector("#category_task").value = '' Diese Beschreibung lässt das Eingabeformular leer.

Schließlich

Damit ist die asynchrone Buchungsfunktion abgeschlossen! Wichtig ist, dass jeder Prozess einfach und leicht zu verstehen ist, wenn Sie den Datenfluss der Ajax-Kommunikation verstehen. Da es ein Anfänger ist, würde ich es begrüßen, wenn Sie mir beibringen könnten, wenn es eine bessere Beschreibung gibt.

Wenn Sie Artikel wie asynchrones Löschen mögen, bitte ~ https://qiita.com/shantianchengyilang316/items/10ab2d84f6cfcfd29def