Text Datei per Button Click erstellen

[psYcho-edgE]

Die URL die im AJAX Call vorhanden ist, muss auf einen Pfad im JSP-Programm zeigen, welcher deinen Part hier ausführt. Aber: in deinem Script musst du irgendwie einen POST oder GET-Parameter der deinen String enthält aus dem AJAX-Call fischen. Wie das geht steht hier (was du mit 3 Sekunden Google auch hättest finden müssen). Wie du deine JSP-Seite so einstellst, dass dein Pfad dein Programmstück hier ausführt kann ich dir aber nicht erklären, hab keine Ahnung von JSP.

$(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://domain:port/pfad/zu/deinem/javaprogramm.jsp",
            // HTTP-Request-Typ
            type: "POST",
            // zu übertragende Daten
            data: {name: text},
            // folgende Funktion bei erfolgreicher Übertragung durchführen
            success: function(data){
                    // mach etwas - z.B. Antwortnachricht deines JSP-Servers ausgeben
            }});
});

 

[Cjls96]

Tut mir Leid für die wahrscheinlich dumme Frage, aber ich bin verwirrt. Welche JSP Datei? Was muss da denn drin stehen? Ich habe auf der einen Seite eine index.html mit stlye.css und script.js erstellt für das User Interface und auf der anderen Seite habe ich dann noch meine java Datei, die eine Datei erstellen und hineinschreiben kann. Ich habe schon nach JSP gegoogelt, aber das hilft mir nicht weiter.

 

[psYcho-edgE]

Ich hab wie gesagt keine Ahnung, wie deine Server verteilt sind. Ich nehme folgendes an:

Server 1: Apache Webserver mit PHP/Node JS als Serversprache, der dein HTML mit den Buttons bereitstellt

Server 2: Tomcat-Webserver mit Java der u.a. deine Java-Datei ausführen soll


Ich habe absolut keine Ahnung wie der Server 2 eingerichtet ist. Und auch kein anderer, solange du da nicht vollständig erklären kannst was da läuft wird dir hier auch nicht so wirklich jemand helfen können.

 

[Cjls96]

Guten Tag,

ich will eine Webapp programmieren, die folgendes tut: Sie zeigt Bilder und Videos, die nach Button Klick andere Bilder und Videos erscheinen lassen. Dazu habe ich schon den kompletten HTML, CSS und Javascript Code im Notepad++ Editor geschrieben, das passt soweit alles. Jetzt will ich aber noch eine zusätzliche Funktion. Bei einem anderen Buttonclick soll eine eine Datei in einem bestimmten Ordern mit einem Text erstellt werden. Den Java Code für das Erstellen und Beschreiben einer Textdatei habe ich auch schon geschrieben. Im Javascript Code muss ich nun einen Ajax Call bei Buttonclick ausführen, aber wie verweist der auf die Java Datei? Und wie kann ich testen, ob alles funktioniert? Muss ich dazu die Dateien auf einen Webserver wie Apache legen oder wie funktioniert das? Nochmal zum Verständnis, alles was ich bereits habe.
Ordnerstruktur:

Die index.html Datei mit dem HTML Code.
In dem css Ordner befindet sich u.a. die style.css Datei, die ich selber geschrieben habe.
In dem js Ordner befindet sich u.a. die script.js Datei, die ich selber geschrieben habe.
Unter Pictures und Videos sind die jeweiligen Bilder und Videos abgelegt.
In dem Server Ordner findet man das Java Projekt zum Erstellen und Beschreiben einer Text Datei.
Die restlichen Ordner sind zum Einbinden von Bootstrap und Font Awesome notwendig. Das wäre auch per CDN gegangen, aber ich habe mich für einen Download entschieden.

Außerdem habe ich noch Xampp installiert, da ich ja einen Webserver brauche zum Testen (falls das so geht).

 

[psYcho-edgE]

2 Fragen:

1. wurde dir vorgegeben die Textdatei mithilfe Java zu überschreiben? Wieso/warum?
2. willst du das Dateischreiben auf dem gleichen Server machen oder auf einem entfernten Server?

 

[Cjls96]

--Nein, ich verwende später nur ein iframe einer anderen Webapplikation auf meiner Webapplikation, das ebenfalls in Java implementiert wurde. Deshalb will ich einheitlich bleiben. Außerdem kenne ich mich mit php nicht aus.
--Auf dem gleichen Server

Ich habe jetzt meine Dateien mal in ein Dynamic Web Project von Eclipse integriert, da ich wohl einen Anwendungsserver wie Tomcat brauche.

Ergänzung (4. Februar 2019)

Ich habe jetzt bei Eclipse ein Dynamic Web Project eröffnet und alle Dateien in den Ordner Web-Content kopiert. Was wäre denn jetzt der nächste Schritt? Also kann ich hier meine Java Datei zum Erstellen/Beschreiben einer Text Datei integrieren?

 

[psYcho-edgE]

Was wäre denn jetzt der nächste Schritt? Also kann ich hier meine Java Datei zum Erstellen/Beschreiben einer Text Datei integrieren?

Und genau da kann ich dir leider nicht mehr helfen da sich meine praktischen Javakentnisse in etwa auf "Hello World"-Niveau befinden. Da musst du dich wirklich selbst einlesen oder hoffen dass dir jmd anderes hier das erklärt. Ggf. auch mal bei Stackoverflow.com schauen.

Anschließend muss dein AJAX-Call nur auf die URL zugreifen, hinter der du dein Java-Programm ausführen lässt, in diesem musst du nur noch den POST-Parameter aus dem AJAX-Call entnehmen, damit du ihn in die Datei einspeichern kannst, dann hast du es schon geschafft.

 

[Cjls96]

Jemand anderes der mir hier weiterhelfen kann? Was muss am js-Code oder am Servlet geändert werden, das es funktioniert? Wie übergebe ich die Variable text, an das Servlet?

$(document).on("click", "#version1", function() {
    
    let text = "V1";
    
    $.ajax({
            
            url: "http://localhost:801/Modelle/CreateWriteFile",
            
            type: "GET",
            
            data: text,
            
            success: function(data){
            
            }});
});

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CreateWriteFile
 */
@WebServlet("/CreateWriteFile")
public class CreateWriteFile extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CreateWriteFile() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Path path = Paths.get("C://xampp//tomcat//webapps//selectedVersion.txt");
        String content = request.getParameter(text);
                
        try (BufferedWriter writer = Files.newBufferedWriter(path))    {
                    writer.write(content);
        }

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

Und verwende ich im Ajax Call Get oder Post für einen einfachen String wie V1? Und im Servlet dann ebenfalls doGet oder doPost?

 

[psYcho-edgE]

@Cjls96 wenn du den HTTP-Konventionen Folge leisten willst, dann überträgst du Daten an den Server die zur Verarbeitung gedacht sind, das heißt POST als Methode.
Es ginge auch mit GET-Parametern, die aber eigtl. dafür da sind, die Ausgabe vom Content zu beeinflussen (Filter in Webshops etc.).

Hier mal ein Post aus Stackoverflow, wie man an die Parameter im Servlet kommt.

 

[Cjls96]

Also habe es jetzt geschafft die gewollte Datei zu erstellen. Dazu war es nötig dass die jQuery CDN angepasst wurde. Die Slim Version hat nicht gereicht, da es Ajax nicht als Funktion gekannt hat. Leider habe ich das Problem, dass kein Inhalt (also V1, V2, V3) drin steht. Irgendwie bekommt das Servlet also die Variable nicht. Also entweder ich muss an dieser Zeile im Servlet etwas anpassen String content = request.getParameter("text"); oder beim Ajax Call

 

[Darlis]

Ich sehe in deinem ajax-Aufruf nirgends den Parameter "text".

 

[psYcho-edgE]

@Cjls96 mach mal aus data: text ein data: {text: text} bzw ein data: 'text='+text

war mein Fehler, das ist ja n key:value-Paar

 

[Cjls96]

Okay mit data: {text: text} funktioniert es, danke! Aber ein Problem habe ich immer noch. In der Web Konsole wird folgender Fehler angezeigt: XML-Verarbeitungsfehler: kein Wurzel-Element gefunden. Und dann die localhost Adresse vom Servlet. Ist das ein relevantes Problem?

 

[psYcho-edgE]

Ich vermute das liegt daran dass eine Antwort vom Server erwartet wird (ein String mit success oder etw. in die Richtung). Da AJAX grundsätzlich für XML gedacht war und du keinen Response Header für den Datentyp der Antwort vom Server eingesetzt hast, wird der Default von jQuery, XML, erwartet. Der Fehler sagt wortwörtlich: "Hey, das XML hier hat kein Wurzelelement" (wenn wundert es wenn gar nix zurückkommt vom Server).

Finde mal raus, wie du in deinem Servlet eine Response schreibst und den HTTP Response Header für "text/plain" setzt.