Text Datei per Button Click erstellen

[Cjls96]

Ich habe eine Webpage mit HTML, CSS und Javascript geschrieben. Dabei habe ich, der Vollständigkeit halber, dass das HTML/CSS Framework Bootstrap benutzt und in Javascript mit der Bibliothek jQuery gearbeitet. Ich habe einen Button erstellt, der folgende Funktion haben soll. Wenn man auf ihn klickt, soll der Inhalt einer Text Datei zuerst gelöscht werden und danach neuer Text reingeschrieben werden. Die Datei liegt dabei auf einem Tomcat Server. Wie realisiere ich das?

 

[Madman1209]

Hi,

in dem du die Daten z.B. per AJAX / JSON an einen Controller auf dem Server schickst und dort dann in der Sprache deiner Wahl auf dem Server den Auftrage abarbeitest.

VG,
Mad

 

[hroessler]

Wie @Madman1209 richtig geschrieben hat, muss ein click auf den Button einen AJAX Call auslösen. Dieser schickt eine Anfrage an den Server, der die Datei laden und den Text auslesen kann. Danach verpackt die Action den Text im JSON Format und sendet das Ergebnis zurück an den Browser, der den Text dann per JavaScript an der richtigten Stelle im DOM einfügen kann.

greetz
hroessler

 

[psYcho-edgE]

@hroessler warum soll das alles in ein JSON gewickelt werden?

 

[Cjls96]

Also das hier ist jetzt der Ajax Call, wenn man auf den Button #version1 klickt.

$(document).on("click", "#version1", function() {
    $.ajax("http://localhost:8080/Modell/")
});

Was muss ich jetzt machen, dass in meinem Ordner C:\xampp\tomcat\webapps eine txt-Datei mit dem Inhalt V1 erstellt wird?

Ergänzung (30. Januar 2019)

Path file = ...;
try {
    Files.createFile(file);
} catch (FileAlreadyExistsException x) {
    System.err.format("file named %s" +
        " already exists%n", file);
} catch (IOException x) {
      System.err.format("createFile error: %s%n", x);
}

Das habe ich gefunden, nur damit kann ich nicht wirklich was anfangen. Bis auf, dass ich jetzt weiß, dass die Methode createFile verwendet werden muss. Aber wo definiere ich, wie die Datei heißen soll, was drin stehen soll und wo sie abgespeichert wird?

 

[coolmodi]

Aber wo definiere ich, wie die Datei heißen soll, was drin stehen soll und wo sie abgespeichert wird?

Hast du schon gepostet:

Path file = ...;

Siehe z.B. Paths.get(). Und wegen schreiben siehe z.B. Files.write()

Aber wieso nutzt du überhaupt Java und Tomcat, wenn du von Java keine Ahnung zu haben scheinst? Gibt einfachere Dinge zum Einstieg, z.B. Apache+PHP, oder NodeJS wenn du mit JS schon eher zurecht kommst.

 

[Cjls96]

Path file = "C:\xampp\tomcat\webapps";
byte[] bytes = ["v1"];
Files.write(path, bytes)
try {
    Files.createFile(file);
} catch (FileAlreadyExistsException x) {
    System.err.format("file named %s" +
        " already exists%n", file);
} catch (IOException x) {
      System.err.format("createFile error: %s%n", x);
}

Also sieht das dann so aus?

 

[Cjls96]

Writer writer = null;

try {
    writer = new BufferedWriter(new OutputStreamWriter(
          new FileOutputStream("filename.txt"), "utf-8"));
    writer.write("Something");
}
catch (IOException ex) {
}
finally {
   try {writer.close();} catch (Exception ex) {}
}

Also ich habe jetzt herausgefunden, wie ich etwas in eine Datei schreibe. Über filename kann ich angeben, wie die Datei heißen soll und für "something" kann ich eingeben was drin stehen soll.

Jetzt aber noch zwei Fragen:
Was gebe ich hier im Backend für "something" ein, damit folgendes passiert:
Im Frontend sind drei Buttons. Wenn Button 1 gedrückt wird, soll v1 eingetragen werden, wenn Button2 gedrückt wird, soll v2 eingetragen werden und das gleiche für Button3.

Ich habe ja bisher schon einen Ajax-call für die Buttons gemacht:

$(document).on("click", "#button1", function() {
    $.ajax("http://localhost:8080/Modelle/")
});
$(document).on("click", "#button2", function() {
    $.ajax("http://localhost:8080/Modelle/")
});
$(document).on("click", "#button3", function() {
    $.ajax("http://localhost:8080/Modelle/")
});

Und die zweite Frage: Ist die Adresse, damit schon definiert, wo die jeweilige Datei stehen soll (http://localhost:8080/Modelle/)?

 

[hroessler]

@hroessler warum soll das alles in ein JSON gewickelt werden?

Weil JSON das Standardformat für die Datenübertragung per AJAX ist. Alternativ ist auch XML möglich, sofern mehr Sicherheit (XML ist validierbar, JSON nicht) notwendig ist.

Ein nackter String ist zwar problemlos technisch möglich. Allerdings hält sich jeder gute Entwickler a) an bestehende Standards und Konventionen und b) macht möglichst alles nach dem selben Prinzip, auch wenn dadurch ein kleiner Overhead (hier nicht mal der Rede Wert) entsteht.

greetz
hroessler

 

[psYcho-edgE]

@hroessler nur weil das XMLHttpRequest-Objekt aufgrund seines ursprünglichen Einsatzzwecks so heißt, ist die Verpackung von Nutzdaten sowohl im Request Body als auch Response Body in HTML bzw. XML geschweige denn JSON nicht vorgeschrieben.

Schau bitte ins MDN, da sind verschiedenste Datentypen erlaubt, u.a. simple Strings.

Wenn es dir um das reine AJAX als "standardisierte" Technologieansammlung geht, kann man JSON zwad als Standard annehmen, es bringt aber nicht viel in Situationen wie dieser einen offensichtlichen Neuling mit zusätzlichen Restriktionen zu belasten, die nur aus einem Paradigma entstanden und nichts mit den Möglichkeiten und Limits der tatsächlichen Technologien zu tun hat. Wie du am Namen siehst ist das Datenformat egal sonst hätte man nicht im Laufe der Zeit aufgrund der Umstände überhaupt immer häufiger JSON nehmen können, sondern wäre immer noch bei XML. Es sind immer noch bloße HTTP-Requests. Du kannst sogar binärdaten über einen XMLHttpRequest senden und empfangen. JSON ist häufig aber kein Standard als solcher.

Ergänzung (31. Januar 2019)

Writer writer = null;

try {
    writer = new BufferedWriter(new OutputStreamWriter(
          new FileOutputStream("filename.txt"), "utf-8"));
    writer.write("Something");
}
catch (IOException ex) {
}
finally {
   try {writer.close();} catch (Exception ex) {}
}

Also ich habe jetzt herausgefunden, wie ich etwas in eine Datei schreibe. Über filename kann ich angeben, wie die Datei heißen soll und für "something" kann ich eingeben was drin stehen soll.

Jetzt aber noch zwei Fragen:
Was gebe ich hier im Backend für "something" ein, damit folgendes passiert:
Im Frontend sind drei Buttons. Wenn Button 1 gedrückt wird, soll v1 eingetragen werden, wenn Button2 gedrückt wird, soll v2 eingetragen werden und das gleiche für Button3.

Ich habe ja bisher schon einen Ajax-call für die Buttons gemacht:

$(document).on("click", "#button1", function() {
    $.ajax("http://localhost:8080/Modelle/")
});
$(document).on("click", "#button2", function() {
    $.ajax("http://localhost:8080/Modelle/")
});
$(document).on("click", "#button3", function() {
    $.ajax("http://localhost:8080/Modelle/")
});

Und die zweite Frage: Ist die Adresse, damit schon definiert, wo die jeweilige Datei stehen soll (http://localhost:8080/Modelle/)?

Ich glaube du solltest dich mal ein wenig in die Funktionsweise vom HTTP und Backend-Programmierung für Tomcat-Server also Java einlesen.

Stichwörter sind HTTP-Parameter (sowohl auf der Javascript- als auch Java-Seite) für den zu übermittelnden Text und Routing-Konfiguration (für den Tomcat) um das richtige Skript/Programm hinter der richtigen URL auszuführen.

 

[Cjls96]

Kann mir nicht einfach jemand sagen, was genau gemacht werden muss? Ich muss von meinem Javascript file bei Button Click ein Ajax Request an den Server machen, sprich an eine url "***.jsp", stimmt das? Und schreibe ich in diese jsp Datei, dann meine Funktion?

 

[Madman1209]

Hi,

genau - wobei die Anmerkung, "warum JSP und Tomcat" auch berechtigt ist. Vielleicht wäre da PHP mit Apache wirklich die einfachere Möglichkeit für dich.

Aber grundsätzlich stimmt der Ablauf:

Daten -> Controller ("JSP URL") -> Bearbeitung -> Rückmeldung an Aufrufer

VG,
Mad

 

[psYcho-edgE]

@Cjls96

Hier mal der Code auf JS-Seite für Knopf 1.

$(document).on("click", "#button1", function() {
    // zu übertragende Daten holen (ggf. zum Beispiel aus einem Eingabefeld)
    let text = "v1";
    // asynchroner HTTP-POST-Request
    $.ajax({
            // aufzurufendes Serverskript
            url: "http://localhost:8080/Modelle",
            // HTTP-Request-Typ
            type: "POST",
            // zu übertragende Daten
            data: text,
            // folgende Funktion bei erfolgreicher Übertragung durchführen
            success: function(data){
                    // mach etwas - z.B. Antwortnachricht deines JSP-Servers ausgeben
            }});
});

Das einzige was du noch machen musst, ist den Tomcat so konfigurieren, dass beim Aufrufen der URL, die du dir vorstellst, die Java-Datei ausgeführt wird. Da kann ich dir aber leider nicht mehr helfen.

 

[hroessler]

@hroessler nur weil das XMLHttpRequest-Objekt aufgrund seines ursprünglichen Einsatzzwecks so heißt, ist die Verpackung von Nutzdaten sowohl im Request Body als auch Response Body in HTML bzw. XML geschweige denn JSON nicht vorgeschrieben.

Schau bitte ins MDN, da sind verschiedenste Datentypen erlaubt, u.a. simple Strings.

Wenn es dir um das reine AJAX als "standardisierte" Technologieansammlung geht, kann man JSON zwad als Standard annehmen, es bringt aber nicht viel in Situationen wie dieser einen offensichtlichen Neuling mit zusätzlichen Restriktionen zu belasten, die nur aus einem Paradigma entstanden und nichts mit den Möglichkeiten und Limits der tatsächlichen Technologien zu tun hat. Wie du am Namen siehst ist das Datenformat egal sonst hätte man nicht im Laufe der Zeit aufgrund der Umstände überhaupt immer häufiger JSON nehmen können, sondern wäre immer noch bei XML. Es sind immer noch bloße HTTP-Requests. Du kannst sogar binärdaten über einen XMLHttpRequest senden und empfangen. JSON ist häufig aber kein Standard als solcher.

Du hast meinen Text nicht gelesen / verstanden!

greetz
hroessler

 

[psYcho-edgE]

Du hast meinen Text nicht gelesen / verstanden!

Ein nackter String ist zwar problemlos technisch möglich. Allerdings hält sich jeder gute Entwickler a) an bestehende Standards und Konventionen und b) macht möglichst alles nach dem selben Prinzip, auch wenn dadurch ein kleiner Overhead (hier nicht mal der Rede Wert) entsteht.

a) die Standards an die er sich halten kann sind REST oder SOAP in denen er selbst die Struktur der Datensätze definiert, halten muss er sich an das HTTP-Protokoll und die XMLHttpRequest-Methoden, aber wozu man unbedingt für das simple Versenden eines Strings einem REST oder SOAP-Paradigma folgen soll ist mir schleierhaft
b) das wage ich stark zu bezweifeln, ein guter Programmierer wählt eine angemessene Technologie für seinen Einsatzzweck aus - nur weil du es extrem gewohnt bist, JSON durch die Welt zu pumpen, ist das weder überall sinnvoll noch notwendig, dann wäre alleine der Großteil der asynchron übermittelten Formulare im Web nämlich "unkonventionell", weil die die Formulardaten serialisiert als String übermitteln, genauso wie der Browser es bei einer synchronen Übermittlung macht

 

[hroessler]

a) die Standards an die er sich halten kann sind REST oder SOAP in denen er selbst die Struktur der Datensätze definiert, halten muss er sich an das HTTP-Protokoll und die XMLHttpRequest-Methoden, aber wozu man unbedingt für das simple Versenden eines Strings einem REST oder SOAP-Paradigma folgen soll ist mir schleierhaft
b) das wage ich stark zu bezweifeln, ein guter Programmierer wählt eine angemessene Technologie für seinen Einsatzzweck aus - nur weil du es extrem gewohnt bist, JSON durch die Welt zu pumpen, ist das weder überall sinnvoll noch notwendig, dann wäre alleine der Großteil der asynchron übermittelten Formulare im Web nämlich "unkonventionell", weil die die Formulardaten serialisiert als String übermitteln, genauso wie der Browser es bei einer synchronen Übermittlung macht

Ja, wie ich bereits sagte. Du hast die Worte, aber nicht den Sinn dahinter verstanden.

greetz
hroessler

 

[psYcho-edgE]

Wie wäre es dann den kryptischen Sinn dahinter auszuführen, vielleicht lernt der TE davon ja was...

 

[rumbalotte]

Man kann doch hinter dem Button einfach eine form legen, die auf die gleiche Seite verweisen lassen und als Action für die form dann serverseitig das gewünschte machen o.O

 

[psYcho-edgE]

@rumbalotte wieso so, wenn er einen simplen asynchronen Request machen kann, dafür muss die Seite auch nicht neu geladen werden.

Die Frage ist auch ob der Webserver der das HTML bereitstellt überhaupt der gleiche ist wie der angesprochene Tomcat.

 

[Cjls96]

Ich habe eine Java Datei implementiert, die eine Datei erstellt und Text hineinschreiben kann.

import java.io.BufferedWriter;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

public class CreateWriteFile {

    public static void main(String[] args) throws IOException {
        Path path = Paths.get("C://Users//...//selectedVersion.txt");
        String content = "V0";
        
        try (BufferedWriter writer = Files.newBufferedWriter(path))    {
            writer.write(content);
        }

    }

}

Hierbei ist es gewollt, dass die Datei selectedVersion.txt überschrieben wird, wenn sie bereits existiert.

Wie bringe ich das ganze jetzt aber mit dem Ajax Call hier zusammen

$(document).on("click", "#button1", function() {
    // zu übertragende Daten holen (ggf. zum Beispiel aus einem Eingabefeld)
    let text = "v1";
    // asynchroner HTTP-POST-Request
    $.ajax({
            // aufzurufendes Serverskript
            url: "http://localhost:8080/Modelle",
            // HTTP-Request-Typ
            type: "POST",
            // zu übertragende Daten
            data: text,
            // folgende Funktion bei erfolgreicher Übertragung durchführen
            success: function(data){
                    // mach etwas - z.B. Antwortnachricht deines JSP-Servers ausgeben
            }});
});

Ein Dank geht hierbei nochmal an @psYcho-edgE

Das Ziel ist es ja, dass V1 an den String Content vom Java Programm übergeben wird, dass dann ausgeführt werden soll.