Tutorial: So debuggen Sie AJAX in Rails

Eines der häufigsten Probleme, das mir bei weniger erfahrenen Programmierern auffällt, ist, dass sie nicht verstehen, wie sie das Debuggen von AJAX in einer Rails-App angehen sollen. Ich werde den Ansatz erläutern, den ich persönlich zum Debuggen von Ajax verwende.

Client vs. Server

Wie die meisten Programmierer wissen, ist Javascript eine clientseitige Programmiersprache, was bedeutet, dass der Code im Browser des Endbenutzers ausgeführt wird, und Ruby-Code ist eine serverseitige Programmiersprache, was bedeutet, dass er auf dem Server ausgeführt wird.

Dieses Konzept kann Verwirrung stiften, da einige Programmierer nicht wirklich sicher sind, wie Daten vom Client (Javascript) zum Server (Ruby/Rails) gelangen.

Lassen Sie uns dies in einem einfachen Beispiel aufschlüsseln.

Senden von Daten an den Server

Angenommen, wir haben ein Szenario, in dem wir den Namen eines Benutzers an den Server senden und ihn dann in der Datenbank speichern möchten.

Hier ist ein Beispiel für ein jQuery-Snippet, bei dem wir den Namen eines Benutzers vom Client an den Server senden.

// Create a variable in JSON format
var user = {
  first_name: 'Jeff',
  last_name: 'Smith' 
}

// Post data via ajax to a rails controller
$.post('/users', user);

Wenn wir dies aufschlüsseln, erstellt dies nur eine Javascript-Variable mit dem Namen user mit den Attributen first_name und last_name.

// Create a variable in JSON format
var user = {
  first_name: 'Jeff',
  last_name: 'Smith' 
}

Es ist ein JSON-Objekt, sodass Sie den Vornamen durch Ausführen abrufen können user.first_name und der Nachname von user.last_name.

Hier passiert die Magie, die Daten vom Client zum Server zu senden.

// Post data via ajax to a rails controller 
$.post('/users', user);

Wenn Sie sich die jQuery-Dokumentation ansehen für die $.post -Methode können Sie sehen, dass der erste Parameter die URL ist, an die die Daten gesendet werden sollen, und der zweite Parameter die Daten selbst sind.

In unserem Code senden wir Daten an die /users Pfad unserer Rails-App, und wir passieren diesen user Variable, die wir erstellt haben.

Abrufen der Daten auf dem Server, die vom Client gesendet wurden

Hier ist eine ziemlich typische Erstellungsmethode eines Controllers. Es erstellt einfach einen neuen Benutzerdatensatz in der Datenbank aus den übergebenen Parametern.

class UsersController < ApplicationController
  def create
    @user = User.new(params[:user])

    respond_to do |format|
      if @user
        format.html { redirect_to @user, notice: 'User was successfully created.' }
      else
        format.html { render action: "new" }
      end 
    end
  end
end

Debuggen

Angenommen, Sie haben sowohl diesen Javascript- als auch den Ruby-Code in Ihrem Projekt, aber der Benutzerdatensatz wird nicht erstellt. Sie müssen irgendwie Zeile für Zeile durch den Code gehen, um zu sehen, wo das Problem auftritt.

Ich beginne am Anfang des Prozesses und zeige Ihnen, wie Sie den Code mithilfe der Protokollierung schrittweise durchlaufen. Beachten Sie, dass es verschiedene Möglichkeiten zum Debuggen gibt, aber dies ist die einfachste, da keine externen Bibliotheken erforderlich sind.

Der einfachste Weg zum Debuggen in Javascript ist die Verwendung der Entwicklertools in Ihrem Browser. Sie sind in viele Browser integriert, aber meine persönliche Präferenz ist die Verwendung des Firebug-Plugins in Firefox.

Debuggen des Javascripts

Indem Sie diese Zeile in Ihren Code einfügen, wird sie gedruckt, wenn sie ausgeführt wird I log to the browser’s console in der Konsole des Browsers.

console.log(“I log to the browser’s console”);

Console.log - Debuggen Sie Ajax in Rails

Wenn ich unseren ursprünglichen Javascript-Code mit einigen Protokollierungsanweisungen ändere und dann den Code ausführe, können Sie sehen, dass ich den Namen des Benutzers protokolliere und dann auch das Benutzerobjekt in der Konsole protokolliere.

// Create a variable in JSON format
var user = {
  first_name: 'Jeff',
  last_name: 'Smith' 
}

console.log("user's name = " + user.first_name + " " + user.last_name);
console.log(user);

// Post data via ajax to a rails controller
$.post('/users', user);

Console.log-Objekt

So können wir sehen, dass die Daten so vorhanden sind, wie wir es erwarten würden. Die nächste Zeile, die wir durchlaufen müssen, ist die $.post zum Server.

Ruby debuggen

Es gibt verschiedene Möglichkeiten, sich bei einer Rails-App anzumelden. Der eine, den ich behandeln werde, ist der Standard-Standardausgang, der sich an der Rails-Konsole anmeldet.

Wenn Sie Folgendes in Ihrem Rails-Code ausführen, wird es protokolliert Logging to the rails console in der Schienenkonsole.

puts "Logging to the rails console"

In einer POST-Anforderung an eine Rails-Methode wird die params Variable enthält die Daten, die über die übergeben wurden $.post Anfrage in unserem Javascript.

Hier ist die modifizierte create-Methode, die die enthält puts Linie.

class UsersController < ApplicationController
  def create

    puts “user = “
    puts params[:user]

    @user = User.new(params[:user])

    respond_to do |format|
      if @user
        format.html { redirect_to @user, notice: 'User was successfully created.' }
      else
        format.html { render action: "new" }
      end 
    end
  end
end

Wenn Sie diesen Code in Ihrer Rails-App ausführen und sich dann die Rails-Konsole ansehen, sehen Sie die folgende Ausgabe.

user = 
{“first_name"=>"Jeff", “last_name”=>"Smith"}

Sie werden auch feststellen, dass die Parameter bei jeder Anfrage automatisch auf die Rails-Konsole gedruckt werden und ungefähr so ​​​​aussehen.

Started POST "/users" for 127.0.0.1 at 2014-04-13 10:44:36 -0500
    Processing by UsersController#create as HTML
Parameters: {"utf8"=>"✓", “authenticity_token"=>"2Ct5hb/I3+u87PGGw3nRpvMNUE7Enjfu1ZSwsQr6qMc=", “user"=>{"first_name"=>"Jeff", “last_name"=>"Smith"}, "button"=>""}

Da das Benutzerobjekt in den Parametern so aussieht

user"=>{"first_name"=>"Jeff", “last_name”=>"Smith"}

Wenn Sie nur den Vor- oder Nachnamen protokollieren möchten, können Sie dies tun.

puts params[:user][:first_name]

und es würde dies auf der Rails-Konsole ausgeben

Jeff

Wenn ich der create-Methode weitere puts-Zeilen hinzufüge, kann ich den Bereich eingrenzen, der dazu führt, dass mein Benutzerobjekt in diesem Beispiel nicht in der Datenbank gespeichert wird.

Da wir wissen, dass die Daten korrekt vom Javascript an die create-Methode gesendet werden, können wir dann in unserer create-Methode weiter debuggen.

class UsersController < ApplicationController
  def create

    puts "user = "
    puts params[:user]

    @user = User.new(params[:user])

    respond_to do |format|
      if @user
       format.html { redirect_to @user, notice: 'User was successfully created.' }
      else
        format.html { render action: "new" }
      end 
    end
  end

end

Das nächste, was ich tun würde, ist hinzuzufügen puts Anweisungen in unserer if/else-Anweisung, damit wir herausfinden können, ob der Code in der if -Anweisung ausgeführt wird oder wenn der Code in der else Anweisung wird ausgeführt.

if @user
  puts "We’re in the IF statement"
  format.html { redirect_to @user, notice: 'User was successfully created.' }
else
  puts "We’re in the ELSE statement"
  format.html { render action: "new" }
end

Wenn ich meinen Code jetzt ausführe, wird Folgendes in der Rails-Konsole ausgegeben

user =
{“first_name"=>"Jeff", “last_name”=>”Smith"}
We’re in the IF statement

Ok, jetzt, da ich weiß, dass wir tatsächlich in die IF-Anweisung gelangen, von der wir wissen, dass der Code hineinkommen sollte, wenn der Datensatz gespeichert wird, wissen wir, dass wir prüfen müssen, warum wir in die IF-Anweisung gelangen und Der Datensatz wird nicht in der Datenbank gespeichert.

In diesem Beispiel lautet unsere if-Anweisung

if @user

Das bedeutet im Grunde „Wenn das @user-Objekt existiert“. Also ja die @user Objekt existiert, weil wir mit der folgenden Zeile erstellt haben und wenn ich eine weitere hinzufügen würde puts Anweisung, nachdem wir erstellt haben @userwürde ich sehen, dass es existiert.

@user = User.new(params[:user])

Jetzt weiß ich also, dass der Code in der create-Methode dem Pfad folgt, den ich erwarten würde. Aber warten Sie eine Minute, ich kann mich nicht erinnern, das tatsächlich gespeichert zu haben @user Gegenstand sowieso.

Ah ha! Diese Linie

if @user

sollte eigentlich sein

if @user.save

Wenn wir nun diesen Code ausführen, können wir sehen, dass er den Datensatz tatsächlich in der Datenbank speichert.

Fazit

Dies ist ein sehr einfaches Beispiel, aber es demonstriert einige sehr wichtige Prinzipien, wenn es um das Debuggen von AJAX in einer Rails-Anwendung geht.

Denken Sie nur daran, Ihren Code immer schrittweise durchzugehen, um sicherzustellen, dass Daten und Variablen Ihren Erwartungen entsprechen.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *