[JAVA] Die Geschichte der Einführung der Ajax-Kommunikation in Ruby

Ajax-Kommunikation mit jQuery × Server-Verarbeitung mit Rails

Ich möchte eine Anfrage über Ajax-Kommunikation mit jQuery-Code stellen, die Verarbeitung in Rails durchführen und sie in einer Antwort im JSON-Format zurückgeben. Insbesondere: "Wenn Sie auf die Schaltfläche klicken, wird eine Anforderung ausgelöst, die festgelegten Daten werden an Rails gesendet, die Antwort wird vom Client empfangen und die Warnung und die auf der Konsole gesendeten Daten werden angezeigt." Ich würde es gerne probieren.

Dieses Mal möchte ich, um die Client- und die Serverseite verständlicher zu machen, ohne Erb verarbeiten. Daher lautet die Erweiterung der diesmal verwendeten Datei wie folgt.

Client-Seite

Serverseite

Code in HTML-Datei erforderlich

-Code, der die Funktion liest, die jQuery vom jQuery-Server aktiviert (Einführung der sogenannten jQuery)

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

・ Code zum Lesen von JavaScript-Dateien

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

・ Schaltfläche zum Anfordern an den Server

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

Der Quellcode von HTML, der diese kombiniert, lautet wie folgt.

sample.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Ajax üben</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="Taste">
</body>
</html>

Code für JavaScript-Datei erforderlich

Ajax-Kommunikationscode

Ich werde dieses Mal $ .ajax verwenden, da die folgenden Unterschiede bestehen.

$.ajax Sie können die Verarbeitung schreiben, wenn die Kommunikation erfolgreich ist oder fehlschlägt
$.post Nur die Verarbeitung bei erfolgreicher Kommunikation kann geschrieben werden

Parameter

url: "/test"

-Stellen Sie die Art der HTTP-Kommunikation ein Es gibt GET und POST, aber dieses Mal senden wir die Daten per POST.

type: "POST"

dataType: "json"

・ Inhalt der an den Server gesendeten Daten

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

Methode

・ Erfolgreiche Verarbeitung

Um leichter erkennen zu können, ob die Kommunikation erfolgreich war, zeigen wir Daten in Warnungen an. In Google Chrome wird also nur die Warnung als "Objekt" angezeigt Sie müssen eine spezielle Methode hinzufügen (JSON.stringify). 
done(function(human){
  alert(JSON.stringify(human));
});

・ Verarbeitung zum Zeitpunkt des Ausfalls (optional)

Wenn die Kommunikation fehlschlägt, werden die gesendeten Daten auf der Konsole angezeigt. Die responseText-Methode ist eine Methode, mit der Daten während der Ajax-Kommunikation erfasst werden können. 
fail(function(human){
  console.log(human.responseText);
});

・ Verarbeitung, die unabhängig von Erfolg oder Misserfolg durchgeführt wird

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

Der Code für diese jQuery ist unten zusammengefasst.

Supplement Klicken Sie auf die Schaltfläche mit dem ID-Attribut btn1, um die folgende Ajax-Kommunikation durchzuführen ($ .ajax). -Senden Sie Benutzerdaten an / test per POST. - Empfangen Sie Daten im JSON-Format, wenn Sie vom Server antworten. -Wenn die Kommunikation erfolgreich ist, werden die zurückgegebenen Daten (Variable Mensch) im Browser als Warnung angezeigt. (.erledigt) - Wenn die Kommunikation fehlschlägt, werden die Antwortdaten als Zeichenfolge auf der Konsole angezeigt. (.Scheitern) - Zeigen Sie die Antwortdaten auf der Konsole an, unabhängig davon, ob die Kommunikation erfolgreich oder nicht erfolgreich ist. (.immer)

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 für Rails erforderlich (Serverseite)

· Routing Legen Sie das in der js-Datei beschriebene Anforderungsziel (/ test) fest.

route.rb


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

·Regler

Empfängt die in der js-Datei beschriebenen zu sendenden Daten und gibt sie als Antwort im json-Format an den Client zurück. -Erhalten Sie die gesendeten Daten {Benutzer: {Name: "foo", Alter: 25}} mit der Variablen Mensch - Entsprechen Sie der Variablen human im json-Format.

statics_controller.rb


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

Schließlich##

Hoffentlich sieht das Display wie folgt aus. スクリーンショット 2020-05-25 16.18.45.png

Wie war es? Ich denke, dass asynchrone Kommunikation eine leichte Kommunikation ermöglicht und ein Schritt in Richtung einer App ist, die einer großen Anzahl von Menschen bekannt ist.

Es ist jedoch in der Regel ein komplizierter Mechanismus für Anfänger, daher hoffe ich, dass Sie sich darauf beziehen können.

Recommended Posts