Javascript-forum
Daten an eine andere Site senden und danach diese Seite besuchen. - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/Forum-entwicklung--4)
+--- Forum: Javascript (https://javascript-forum.de/Forum-thema-javascript--6)
+--- Thema: Daten an eine andere Site senden und danach diese Seite besuchen. (/Thread-thema-daten-an-eine-andere-site-senden-und-danach-diese-seite-besuchen--1875)



Daten an eine andere Site senden und danach diese Seite besuchen. - T.Billen - 24.11.2022

Hallo zusammen,

ich möchte gerne per AJAX Request Daten versenden und diese Seite aufrufen (Selbstverständlich sollen die gesendeten Daten dann verarbeitet worden sein).

Als Vorlage habe ich folgendes HTML Script:
<HTML>
<BODY onload="document.form1.submit()">
<FORM name="form1"
      ACTION="./backend/test.php"
      CONTENT="application/x-www-form-urlencoded"
      METHOD="POST"
      enctype="multipart/form-data">

    <input type=hidden name="field_1" value="value_1">
    <input type=hidden name="field_2" value="value_2">
    <input type=hidden name="field_3" value="value_3">
</FORM>
</BODY>
</HTML>


Als Ergbnis bekomme ich:
array(3) { ["field_1"]=> string(7) "value_1" ["field_2"]=> string(7) "value_2" ["field_3"]=> string(7) "value_3" }

test.php printet einfach nur den POST Request aus.

Dieses Ergbnis möchte ich gerne mit einem AJAX Request durchführen, da die Werte in field_1, field_2 und field_3 bekannt sind und nicht vom User verändert werden dürfen (Daher ist der Type auch hidden.).

Nach einer Google Recherche bin ich folgenden AJAX - Request gekommen:
const url = "./backend";

function open(id) {
    let destination = url + "/test.php";

    $.ajax({
        type: "POST",
        url: destination,
        dataType: "json",
        data: { field_1: "value_1", field_2: "value_2", field_3: "value_3" },
        complete:
            function (e) {
                   window.location = destination;
            }

    });
}
Würde ich mir e in der anonym Function bei complete ausgeben, bekomme ich das gewünschte Ergbnis. Allerdings wenn ich window.location = destination; ausführe, wird zwar die Seite aufgerufen, allerdings ohne, dass die Daten verarbeitet werden.

Könnt ihr mir einen Tipp geben, wie ich das in AJAX umsetzen kann? Da dieses Script unabhängig arbeiten soll, kommt das Nutzen von Sessions nicht in Frage. Daher ist diese Aufgabe nicht gleich eines Login Scripts.

Auch muss der User auf die neue Seite mit diesen Eingaben weitergeleitet werden.

Ich hoffe, dass ihr mir helfen könnt.

Viele Grüße aus dem Pott

T.Billen


RE: Daten an eine andere Site senden und danach diese Seite besuchen. - admin - 25.11.2022

Sind das wichtige Daten ?
Wenn nicht, könntest du das mit GET machen.

Musst du den auf der test.php umgeleitet werden?
Du könntest auch die Sachen nach test.php senden und das Ergebnisse da anzeigen lassen, wo du gerade bist.

Was ist das den genau für ein Skript und was für sendest du da hin?
Man könnte noch zwischenspeichern in cache, DB oder Session (auch ohne Login )

Speichern mit JS in localstorage wäre auch möglich


RE: Daten an eine andere Site senden und danach diese Seite besuchen. - rzscout - 25.11.2022

Hi T.Billen,
deine Variante ist viel zu kompliziert. Das kann man einfacher gestalten und du bekommst die Richtigen Daten die du brauchst.

Hier meine Variante:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            var myForm = document.getElementById('myForm');
            var myFormData = new FormData(myForm);
            var xhr = new XMLHttpRequest();
            xhr.open(myForm.getAttribute('method'), myForm.getAttribute('action'));
            xhr.addEventListener('readystatechange', ()=> {
                if(xhr.status == 200 && xhr.readyState == 4) {
                    console.log('Übertragung war erfolgreich!');
                    document.location = 'meinZiel.html';
                }
            });
            xhr.send(myFormData);
        });
    </script>
</head>
<body>
    <form id="myForm" action="./backend/test.php" method="post">
        <input type=hidden name="field_1" value="value_1">
        <input type=hidden name="field_2" value="value_2">
        <input type=hidden name="field_3" value="value_3">
    </form>
</body>
</html>


Informatione zu POST und GET: GET ist mit der Datenmenge beschränkt und man sollte für Datenübertragung POST bevorzugt verwenden.