[RUBY] Ereignisauslösung mit der JavaScript-Bibliothek JQuery / Ajax (bei der Implementierung der asynchronen Kommunikation)

Annahme

• Asynchrone Kommunikation
• Ruby.Rails
• Wenn beispielsweise das Übermittlungsformular gesendet wird (das Ereignis, bei dem die Senden-Taste gedrückt wird, wird ausgelöst), wird das Farbfeld hinzugefügt.
• Beim Auslösen wird die ausgewählte Farbe durch asynchrone Kommunikation in der oberen rechten Ecke angezeigt.

Stellen Sie sicher, dass das, was passiert, wenn ein Ereignis ausgelöst wird, ausgeführt wird

① Was hat ausgelöst (= was ist das Ereignis?) ② Welche Art von Ort soll nach dem Ereignis ausgeführt werden?

Denken Sie an den Code, während Sie an diese beiden denken.

"Wenn Sie diesmal auf die Schaltfläche" Senden "klicken, wird das (Ereignis-) Farbfeld hinzugefügt."

(1) Ich denke, dass das Drücken der Senden-Schaltfläche "wenn das Formular gesendet wird" ist. (2) Ich denke, dass einige Schritte erforderlich sind, damit das Farbfeld nach dem Ereignis angezeigt wird. → Ajax verwenden (datenbezogene Lieferung) → Aussehen nach Änderung des HTML-Codes (teilweise Änderung des Erscheinungsbilds durch Auslösen eines Ereignisses)

① Was hat ausgelöst (was hat das Ereignis ausgelöst?)

Ausgelöst, um das Formular zu senden

Beschrieben als "wenn die Schaltfläche auf dem Formular gedrückt wird".

###.js(JavaScript-Datei)

$(function(){
  $(*****).on(*****, function(){

  })
})

Geben Sie den in das Formular festgelegten Klassennamen in $ () und ein Fügen Sie die Bedeutung des Drückens mit ".on" hinzu. Geben Sie ein, was nach dem Ein (nach "Ein (,") gedrückt werden soll. Diesmal habe ich einen "Submit" -Button hinzugefügt.

<Beschreibungsbeispiel>

$(function(){
  $('.js-form').on('submit', function(){

  })
})

Verwenden Sie außerdem console.log, um zu überprüfen, ob das Ereignis ausgelöst wird. Sie können dies überprüfen, indem Sie es in eine leere Zeile schreiben und die Senden-Taste drücken. console.log ("Test") Bitte setzen Sie es in Klammern. Wenn nicht, sollte eine Fehlermeldung in der Überprüfungskonsole angezeigt werden.

Beenden Sie als Nächstes das Senden des Formulars mit den Standardeinstellungen

Wie es ist, als Standardeinstellung Wenn das Formular gesendet wird, ändert sich der Bildschirm wie zuvor (Bildschirm bewegt sich) (keine asynchrone Kommunikation). Normale Einstellungen sollten blockiert sein. Verwenden Sie präventDefault () für die asynchrone Kommunikation.

###.js(JavaScript-Datei)

  $(*****).on(*****, function(e){
    e.preventDefault()
  
  })
})

Setzen Sie auch in diesem Fall console.log in die leere Zeile in der Mitte und prüfen Sie, ob ein Fehler vorliegt.

② Welche Art von Ort soll nach dem Ereignis ausgeführt werden?

• Verwenden Sie Ajax (datenbezogene Lieferung)
• Aussehen nach Änderung des HTML-Codes (teilweise Änderung des Erscheinungsbilds durch Auslösen eines Ereignisses)

Verwenden Sie Ajax (datenbezogene Lieferung)

Danach wird der Basiscode benötigt Ich habe es von "$ .ajax ({") zum vorherigen Code hinzugefügt.

javascripts/###.js

$(function(){
  $(*****).on(*****, function(e){
    e.preventDefault()
    //Zusätzliche Beschreibung unten von hier
    $.ajax({
      url:Erhaltene Anforderungs-URL,  //"Pfad" in der synchronen Kommunikation
      type: 'POST',  //"HTTP-Methode" in der synchronen Kommunikation
      data:Erhaltene FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
  })
})

↑ Auch wenn Sie diese Beschreibung vornehmen, tritt ein Fehler auf, wenn die Ansichtsdatei (○○ .json.jbuilder) des Übergangsziels nicht erstellt wird.

Schauen wir uns von nun an ein Beispiel an, in dem die send femme als Ereignis verwendet wird.

<Beispiel>

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    //Zusätzliche Beschreibung unten von hier
    let formData = new FormData(this);
    let url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
  });
});

"Schreiben Sie eine Beschreibung, mit der Sie den im Formular eingegebenen Wert erhalten können."

FormData

Wird zum Senden von Formulardaten verwendet. Erstellen Sie FormData, indem Sie es als neue FormData (Formularelement) festlegen. In diesem Fall ist das Argument des Objekts dies. Wenn dies in der im Ereignis festgelegten Funktion verwendet wird, Bezieht sich auf das Knotenelement, in dem das Ereignis aufgetreten ist. In diesem Fall erhalten wir die Informationen des Formulars mit der Klasse js-form. Sie können es auch per ID erhalten.

Informationen zu Formulardaten von <Beispiel>

   let formData = new FormData(this);

attr Methode

Sie können den Wert des im Argument angegebenen Attributs abrufen.

<Beispiel> zu attr-Methode und URL

let url = $(this).attr('action');

Im Beispiel wird 'action' als Argument angegeben, sodass der Wert des Aktionsattributs des from-Elements (hier dieses) abgerufen werden kann.

"/ Songs / 3 / songscolors" Dieser Pfad wird aus der Aktion übernommen und in die URL eingegeben. Ich denke, dass die URL mit der URL von Ajax zusammenhängt.

Legen Sie die für die asynchrone Kommunikation erforderlichen Optionen im Teil "$ .ajax" fest

<Beispiel>$.Beschreibung von Ajax

    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })

Aussehen nach Änderung des HTML-Codes (teilweise Änderung des Erscheinungsbilds durch Auslösen eines Ereignisses)

Die als Ergebnis der asynchronen Kommunikation (Änderung des Erscheinungsbilds des Browsers) zurückgegebenen Daten werden als Argument für die Funktion done (Funktion (Daten) {Verarbeitung}) empfangen. Verwenden Sie die Methode done.

Erstellen Sie außerdem HTML nach "function buildHTML ~" basierend auf dem Argument (), das von der Methode done empfangen wurde.

javascripts/###.js

$(function(){
　 //Fügen Sie hier 5 Zeilen hinzu
  function buildHTML(***js Dateiname***){
    let html = `<*******>
                </*******>`//`Von`HTML wird zwischen eingefügt.
    return html;
  }
  $(*****).on(*****, function(e){
    e.preventDefault()
    let formData = new FormData(this); //Dieser Satz ist erforderlich, wenn Daten aus einem Formular abgerufen werden.
    let url = $(this).attr('action'); //Sie benötigen diesen Satz, wenn Sie das benötigen, was für die Aktion des Formulars angegeben ist.
    $.ajax({
      url:Erhaltene Anforderungs-URL,  //"Pfad" in der synchronen Kommunikation
      type: 'POST',  //"HTTP-Methode" in der synchronen Kommunikation
      data:Erhaltene FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
　　 //Fügen Sie von hier aus Folgendes hinzu
    .done(function(data){
      let html = buildHTML(data);
      $('.***Knopfklasse***').prop('disabled', false) //Die Sendetaste, die nach dem Drücken nicht mehr gedrückt werden kann, kann kontinuierlich gedrückt werden.
      $('***Geben Sie den Speicherort an, den Sie dem ursprünglichen HTML-Code hinzufügen möchten***').prepend(html);//.prepend Fügt den durch das Argument angegebenen Inhalt am Anfang des angegebenen Elements hinzu
    })
  })
})

Methode gemacht

.when () ist der Prozess, den Sie zuerst ausführen möchten. .done () ist der Prozess, den Sie später ausführen möchten. Sie können festlegen, wann Sie wie verarbeiten möchten.

$ ('. Button class'). Prop ('disabled', false)

Deaktivieren Sie in der Beschreibung, in der das Attribut disabled auf false gesetzt ist, die Tatsache, dass die Senden-Schaltfläche nicht mit false gedrückt werden kann. 　 function buildHTMLL(　){let html = `<></>return html;} Konstruieren Sie HTML basierend auf dem Argument (), das von der Methode done empfangen wurde. Die HTML-Konstruktion ist jedes Mal völlig anders, daher habe ich sie hier nicht geschrieben, aber ich werde meinen eigenen Code als Beispiel verwenden.

<Beispiel> Aufnehmen des HTML-Teils

  function buildHTML(songcolor){
    let html =
      `<li class="color-box" style="background-color:${songcolor.color}"></li>`
    return html;
  };

Es ist sehr leicht zu verstehen, wenn Sie sich den HTML-Code ansehen, den Sie mit dem Überprüfungstool hinzufügen möchten Verwenden Sie $ {}, um Datenbankinformationen anzuzeigen. Es ist möglicherweise einfacher, sich daran zu erinnern, dass die hier eingebrachten Informationen in dem in der entsprechenden viwe erstellten .json.jbuilder festgelegt wurden.

Methode voranstellen

Entscheiden Sie, welcher Teil des ursprünglichen HTML-Codes hinzugefügt werden soll, indem Sie die Klasse usw. angeben. Kann am Anfang eines bestimmten Elements (Klasse usw.) hinzugefügt werden. Es gibt andere Methoden, die am Ende hinzugefügt werden müssen.

Mit verschiedenen Methoden wie diesen Das Textfeld kann nach dem Ereignis geleert oder eingestellt werden.

Wenn es durch Auslösen eines Ereignisses implementiert werden kann ...

Angenommen, es könnte nicht ausgeführt werden

javascripts/###.js

$(function(){
  function buildHTML(******){
    let html = `<*******>
                </*******>`
    return html;
  }
  $(*****).on(*****, function(e){
    e.preventDefault()
    let formData = new FormData(this);
    let url = $(this).attr('action');
    $.ajax({
      url:Erhaltene Anforderungs-URL,
      type: 'POST',
      data: FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      let html = buildHTML(data);
      $('.******').prop('disabled', false)
      $('******').prepend(html);
    })
　　 //Fügen Sie von hier aus Folgendes hinzu
    .fail(function(){
      alert('error');
　　 });
  })
})

Fail-Methode

Im Falle eines Serverfehlers wird Fail aufgerufen anstatt erledigt.

Alarmmethode

Ein Alarm wird aufgerufen. Die darin enthaltenen Zeichen ('****') werden in der Warnung angezeigt. 　 　 　 　 　 　 das ist alles! Dies ist das Ende der asynchronen Kommunikationsarbeit. Es ist nicht alles, weil Sie verschiedene andere Einstellungen vornehmen können, Es endet hier einmal.

Ein letztes Wort

Fassen Sie bis hierher zusammen Ich könnte die Bedeutung jeder Beschreibung besser verstehen. Es liegt jedoch auch daran, dass ich tatsächlich meine eigene ursprüngliche Anwendung entwickelt habe. Ich denke, das hat zu diesem Verständnis geführt.

Neue Fragen und Herausforderungen

――Ich mache mir Sorgen, ob ich es implementieren kann, während ich mich an das Verfahren für die asynchrone Kommunikation erinnere.

• Assembly-HTML, das ein Argument der Methode done ist
• Verschiedene Beschreibungen nach getan ――Können die Einstellungen nach Ajax an anderer Stelle angewendet werden? ――Es gibt andere Möglichkeiten für JavaScript als die asynchrone Kommunikation, aber um welchen Mechanismus handelt es sich?

Kann es in der Implementierung verwendet werden, auch wenn es tief verstanden wird? Außerdem möchte ich die Teile lernen, die ich noch nicht eingeholt habe. 　 　 Als ich JS zum ersten Mal sah, dachte ich, ich könnte es nicht so lesen Ich bin froh, dass ich mich jetzt ein wenig daran gewöhnt habe und jeden Teil sehen kann. 　 　 　 　 Vielen Dank für das Lesen bis zum Ende! Wir sehen uns ~