Communication Ajax avec jQuery × Traitement du serveur avec Rails

Je voudrais faire une demande via la communication Ajax en utilisant le code jQuery, effectuer le traitement dans Rails et le renvoyer dans une réponse au format json. Plus précisément, "Lorsque vous cliquez sur le bouton, une demande est déclenchée, les données d'ensemble sont envoyées à Rails, la réponse est reçue par le client et l'alerte et les données envoyées sur la console sont affichées." Je voudrais l'essayer.

Cette fois, afin de faciliter la compréhension du côté client et du côté serveur, je souhaite traiter sans utiliser Erb. Par conséquent, l'extension du fichier utilisé cette fois est la suivante.

Côté client

html
js

Du côté serveur

Code requis dans le fichier HTML

-Code qui lit la fonction qui active jQuery depuis le serveur jQuery (introduction de ce que l'on appelle jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

・ Code pour lire les fichiers JavaScript

<script src="sample.js"></script>

・ Bouton pour demander au serveur

<input type="button" id="btn1" value="bouton">

Le code source de html qui les combine est le suivant.

`sample.html`


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Pratique Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" id="btn1" value="bouton">
</body>
</html>

Code requis pour le fichier JavaScript

Code de communication Ajax

J'utiliserai $ .ajax cette fois en raison des différences suivantes.

$.ajax	Vous pouvez écrire le traitement lorsque la communication réussit ou échoue
$.post	Seul le traitement lorsque la communication est réussie peut être écrit

Paramètres

-Spécifier la destination de la demande du client

url: "/test"

-Définir le type de communication HTTP Il y a GET et POST, mais cette fois nous enverrons les données par POST.

type: "POST"

-Définissez le format de données pour recevoir la réponse du serveur.

dataType: "json"

・ Contenu des données envoyées au serveur

data: { user: { name: "foo", age: 25 } }

Méthode

・ Traitement réussi

Pour vous permettre de voir plus facilement si la communication a réussi, nous affichons les données dans une alerte. Dans Google Chrome, seule l’alerte est affichée en tant qu ’" objet ". Vous devez ajouter une méthode spéciale (JSON.stringify).

done(function(human){
  alert(JSON.stringify(human));
});

・ Traitement au moment de l'échec (facultatif) <détails> <résumé> Lorsque la communication échoue, les données envoyées sont affichées sur la console. </ summary> La méthode responseText est une méthode qui peut acquérir des données pendant la communication Ajax. </ détails>

fail(function(human){
  console.log(human.responseText);
});

・ Traitement effectué indépendamment du succès ou de l'échec

always(function(){
  console.log(human);
});

Le code de ces jQuery est résumé ci-dessous.

<détails>

Supplément </ summary> Cliquez sur le bouton avec l'attribut id btn1 pour effectuer la communication Ajax suivante ($ .ajax) -Envoyer les données utilisateur à / test par POST. -Recevoir des données au format JSON lors de la réponse du serveur. -Lorsque la communication est réussie, les données renvoyées (variable humaine) sont affichées sur le navigateur sous forme d'alerte. (.terminé) -Lorsque la communication échoue, les données de réponse sont affichées sous forme de chaîne de caractères sur la console. (.échouer) -Affichez les données de réponse sur la console, que la communication soit réussie ou non. (.toujours)

`sample.js`


$(function(){
  $('#btn1').click(function(){
    $.ajax({
      url: "/test",
      type: "POST",
      dataType: "json",
      data: { user: { name: "foo", age: 25 } }
    })
    .done((human) => {
      alert(JSON.stringify(human))
    })
    .fail((human) => {
      console.log(human.responseText)
    })
    .always((human) => {
      console.log(human)
    });
  });
});

Code requis pour Rails (côté serveur)

· Routage Définissez la destination de la demande (/ test) décrite dans le fichier js.

`route.rb`


Rails.application.routes.draw do
  get "/test", to: 'statics#test'
  post "/test", to: 'statics#test'
end

·manette

Reçoit les données à envoyer décrites dans le fichier js et les renvoie au client au format json en tant que réponse. -Recevoir les données envoyées {user: {name: "foo", age: 25}} avec la variable human -Répondre à la variable human au format json.

`statics_controller.rb`


class StaticsController < ApplicationController
  def test
    human = params[:user]
    render :json => human
  end
end

Finalement##

Espérons que l'affichage ressemblera à celui ci-dessous. スクリーンショット 2020-05-25 16.18.45.png

Je pense que la communication asynchrone permettra une communication légère et sera un pas vers une application bien connue d'un grand nombre de personnes.

Cependant, cela a tendance à être un mécanisme compliqué pour les débutants, j'espère donc que vous pourrez vous y référer.

[JAVA] L'histoire de l'introduction de la communication Ajax à Ruby