[RUBY] Déclenchement d'événement avec la bibliothèque JavaScript JQuery / Ajax (lors de l'implémentation d'une communication asynchrone)

supposition

• Communication asynchrone
• Ruby.Rails --Par exemple, lorsque le formulaire de soumission est soumis (l'événement qui appuie sur le bouton d'envoi est déclenché), le panneau de couleur est ajouté.
• Lors du déclenchement, la couleur sélectionnée est affichée dans le coin supérieur droit par communication asynchrone.

Assurez-vous que ce qui se passe lorsqu'un événement se déclenche est terminé

① Qu'est-ce qui a déclenché (= quel est l'événement?) ② Quel genre d'endroit exécuter à la suite de l'événement

Pensez au code tout en pensant à ces deux éléments.

"Cette fois, si vous appuyez sur le bouton Soumettre, le panneau de couleurs (événement) sera ajouté."

(1) Je pense que le fait d'appuyer sur le bouton Soumettre signifie "lorsque le formulaire est soumis". (2) Je pense que certaines étapes sont nécessaires pour que le panneau de couleur soit affiché à la suite de l'événement. → Utiliser Ajax (livraison liée aux données) → Apparence après changement de HTML (changement partiel d'apparence déclenché par le déclenchement d'événement)

① Qu'est-ce qui a déclenché (quel a été le déclenchement de l'événement?)

Déclenché pour envoyer le formulaire

Décrit comme "lorsque le bouton du formulaire est enfoncé".

###.js(Fichier JavaScript)

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

  })
})

Mettez le nom de classe défini sous la forme en $ () et Ajoutez le sens d'appuyer sur ".on". Entrez sur quoi appuyer après le (après "on (,"). Cette fois, j'ai ajouté un bouton «Soumettre».

<Exemple de description>

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

  })
})

Utilisez également console.log pour vérifier si l'événement se déclenche. Vous pouvez le vérifier en l'écrivant sur une ligne vide et en appuyant sur le bouton d'envoi. console.log ("test") Veuillez le mettre entre parenthèses. Sinon, vous devriez obtenir une erreur dans la console de vérification.

Ensuite, arrêtez de soumettre le formulaire avec les paramètres par défaut

Tel quel, comme paramètre par défaut Lorsque le formulaire est soumis, l'écran change (l'écran se déplace) comme auparavant (pas de communication asynchrone). Les paramètres normaux doivent être bloqués. Utilisez preventDefault () pour la communication asynchrone.

###.js(Fichier JavaScript)

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

Dans ce cas également, mettez console.log dans la ligne vide au milieu et vérifiez s'il y a une erreur.

② Quel genre d'endroit exécuter à la suite de l'événement

--Utiliser Ajax (livraison liée aux données)

• Apparence après changement de HTML (changement partiel d'apparence déclenché par le déclenchement d'un événement)

Utiliser Ajax (livraison liée aux données)

Code de base nécessaire après cela Je l'ai ajouté de "$ .ajax ({") au code précédent.

javascripts/###.js

$(function(){
  $(*****).on(*****, function(e){
    e.preventDefault()
    //Description supplémentaire ci-dessous à partir d'ici
    $.ajax({
      url:URL de la demande obtenue,  //"Chemin" en communication synchrone
      type: 'POST',  //"Méthode HTTP" en communication synchrone
      data:Obtenu FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
  })
})

↑ Même si vous faites cette description, une erreur se produira si le fichier de vue (○○ .json.jbuilder) de la destination de transition n'est pas créé.

À partir de maintenant, regardons un exemple dans lequel la femme d'envoi est utilisée comme événement.

<Exemple>

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    //Description supplémentaire ci-dessous à partir d'ici
    let formData = new FormData(this);
    let url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
  });
});

"Rédigez une description pour que la valeur saisie dans le formulaire puisse être reçue"

FormData

Utilisé pour soumettre les données du formulaire. Créez FormData en le définissant comme nouveau FormData (élément de formulaire). Dans ce cas, l'argument de l'objet est le suivant. Lorsqu'il est utilisé dans la fonction définie dans l'événement, Fait référence à l'élément de nœud où l'événement s'est produit. Dans ce cas, nous obtenons les informations du formulaire avec la classe js-form. Vous pouvez également l'obtenir par ID.

À propos des données de formulaire de <Exemple>

   let formData = new FormData(this);

méthode attr

Vous pouvez obtenir la valeur de l'attribut spécifié dans l'argument.

<Exemple> sur la méthode attr et l'URL

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

Dans l'exemple, 'action' est spécifié comme argument, donc la valeur de l'attribut action de l'élément from (ici ceci) peut être obtenue.

"/ Songs / 3 / Songscolors" Ce chemin est pris à partir de l'action et mis en url. Je pense que l'url est liée à l'url d'Ajax.

Définissez les options requises pour la communication asynchrone dans la partie "$ .ajax"

<Exemple>$.Description de ajax

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

Apparence après changement de HTML (changement partiel d'apparence déclenché par le déclenchement d'un événement)

Les données renvoyées suite à une communication asynchrone (modification de l'apparence du navigateur) sont reçues comme argument de la fonction de done (function (data) {processing}). Utilisez la méthode done.

De plus, construisez du HTML après "function buildHTML ~" en fonction de l'argument () reçu par la méthode done.

javascripts/###.js

$(function(){
　 //Ajoutez 5 lignes ci-dessous à partir d'ici
  function buildHTML(***nom de fichier js***){
    let html = `<*******>
                </*******>`//`De`HTML est inséré entre.
    return html;
  }
  $(*****).on(*****, function(e){
    e.preventDefault()
    let formData = new FormData(this); //Cette phrase est obligatoire lors de la récupération de données à partir d'un formulaire.
    let url = $(this).attr('action'); //Vous avez besoin de cette phrase si vous avez besoin de ce qui est spécifié pour l'action du formulaire.
    $.ajax({
      url:URL de la demande obtenue,  //"Chemin" en communication synchrone
      type: 'POST',  //"Méthode HTTP" en communication synchrone
      data:Obtenu FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
　　 //Ajoutez ce qui suit à partir d'ici
    .done(function(data){
      let html = buildHTML(data);
      $('.***Classe de bouton***').prop('disabled', false) //Le bouton d'envoi, qui ne peut pas être enfoncé une fois qu'il est enfoncé, peut être enfoncé en continu.
      $('***Spécifiez l'emplacement que vous souhaitez ajouter au code HTML d'origine***').prepend(html);//.prepend Ajoute le contenu spécifié par l'argument au début de l'élément spécifié
    })
  })
})

méthode done

.when () est le processus que vous souhaitez exécuter en premier. .done () est le processus que vous souhaitez exécuter plus tard. Vous pouvez définir quand vous souhaitez traiter comme.

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

Dans la description qui définit l'attribut disabled sur false, annulez le fait que le bouton d'envoi ne peut pas être pressé avec false. 　 function buildHTMLL(　){let html = `<></>return html;} Construisez du HTML en fonction de l'argument () reçu par la méthode done. La construction HTML est complètement différente à chaque fois, donc je ne l'ai pas écrite ici, mais je vais utiliser mon propre code comme exemple.

<Exemple> Récupération de la partie HTML

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

Il est très facile de comprendre si vous regardez le code HTML que vous souhaitez ajouter avec l'outil de vérification Utilisez $ {} pour afficher les informations de la base de données, Il peut être plus facile de se rappeler que les informations apportées ici ont été définies dans le .json.jbuilder créé dans le viwe correspondant.

méthode de préfixe

Décidez quelle partie du HTML d'origine à ajouter en spécifiant la classe, etc. Peut être ajouté au début d'un élément spécifié (classe, etc.). Il existe d'autres méthodes à ajouter à la fin.

En utilisant diverses méthodes comme celle-ci, La zone de texte peut être vidée ou définie après l'événement.

S'il peut être implémenté en déclenchant un événement ...

Supposons qu'il ne puisse pas être exécuté

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:URL de la demande obtenue,
      type: 'POST',
      data: FormData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      let html = buildHTML(data);
      $('.******').prop('disabled', false)
      $('******').prepend(html);
    })
　　 //Ajoutez ce qui suit à partir d'ici
    .fail(function(){
      alert('error');
　　 });
  })
})

méthode d'échec

Fail est appelé au lieu de done en cas d'erreur du serveur.

méthode d'alerte

Une alerte est appelée. Les caractères à l'intérieur ('****') sont affichés dans l'alerte. 　 　 　 　 　 　 c'est tout! C'est la fin du travail de communication asynchrone. De nombreux autres paramètres peuvent être définis, ce n'est donc pas la seule option. Cela se termine ici une fois.

Un dernier mot

Résumez ici Je pourrais mieux comprendre la signification de chaque description. Cependant, c'est aussi parce que j'ai développé ma propre application originale. Je pense que cela a conduit à cette compréhension.

Nouvelles questions et défis

«Je suis inquiet si je peux l'implémenter tout en me souvenant de la procédure de communication asynchrone.

• HTML d'assemblage qui est un argument de la méthode done --Diverses descriptions après avoir terminé ――Les paramètres après Ajax peuvent-ils être appliqués ailleurs? ――Il existe des choses que vous pouvez faire avec JavaScript autres que la communication asynchrone, mais de quel type de mécanisme s'agit-il?

Peut-il être utilisé dans la mise en œuvre même s'il est bien compris? Aussi, j'aimerais apprendre les parties que je n'ai pas encore rattrapées. 　 　 Quand j'ai vu JS pour la première fois, je pensais que je ne pouvais pas le lire comme ça Je suis heureux que je sois un peu habitué maintenant et que je puisse voir chaque partie. 　 　 　 　 Merci d'avoir lu jusqu'au bout! à bientôt ~