Keine Seite neu laden nach einem Formular

[Sempervivum]

Das wäre schon möglich aber wenn der Link nicht aufgerufen werden soll, soll ja stattdessen das PHP-Skript aufgerufen werden. Und dafür brauchst Du dann Ajax, womit wir wieder am Anfang wären.

 

[Dragosius]

Das wäre schon möglich aber wenn der Link nicht aufgerufen werden soll, soll ja stattdessen das PHP-Skript aufgerufen werden. Und dafür brauchst Du dann Ajax, womit wir wieder am Anfang wären.

Könntest du mir da eventuell (nochmal) etwas helfen?
Wir sind hier ja bisher nur die Möglichkeit über ein Formular durchgegangen oder habe ich was überlesen?

 

[Sempervivum]

Heißt das, Du hast irgend wie diesen Link zur Verfügung und möchtest, anstatt ihn direkt aufzurufen, mit Ajax das PHP-Skript aufrufen? In welcher Form hast Du denn den Link vorliegen? In einer Variablen? In einem a-href-Tag? Oder ...?

 

[Sempervivum]

PS: Ich hätte gleich genauer lesen sollen: Du hast den Link als a-Element. In dem Fall ist es ganz einfach wenn Du die Parameter einfach mit der get-Methode überträgst:

    <a href="testget.php?param1=value1&param2=value2">Link</a>
    <span id="out"></span>
    <script>
        document.querySelector('a').addEventListener('click', event => {
            // Default-Aktion für Klick auf den Link,
            // d. h. direktes Aufrufen der Seite,
            // verhindern, da wir das Linkziel mit Ajax aufrufen wollen:
            event.preventDefault();
            // Link aus dem href-Attribut holen:
            const link = event.target.href;
            fetch(link, {
                method: 'get'
            }).then(res => {
                return res.text();
            }).then(res => {
                console.log(res);
                document.getElementById('out').innerHTML = res;
            });
        })
    </script>

 

[Dragosius]

Hallo,

also irgendwie wird die Seite trotzdem aufgerufen.

Ich habe es momentan folgendermaßen eingebunden:

$trow = "<a href=\"schreibe.php?text=gag&nickname=$v[u_nick]\">G</a>&nbsp;";
$trow .= "<a href=\"schreibe.php?text=kick&nickname=$v[u_nick]\">K</a>&nbsp;";

$trow .= "<span id=\"out\"></span>\n";
$trow .= "<script>
document.querySelector('a').addEventListener('click', event => {
    // Default-Aktion für Klick auf den Link,
    // d. h. direktes Aufrufen der Seite,
    // verhindern, da wir das Linkziel mit Ajax aufrufen wollen:
    event.preventDefault();
    // Link aus dem href-Attribut holen:
    const link = event.target.href;
    fetch(link, {
        method: 'get'
    }).then(res => {
        return res.text();
    }).then(res => {
        console.log(res);
        document.getElementById('out').innerHTML = res;
    });
})
</script>";

echo $trow;

Kann der Link dann eventuell noch mit einer Klasse versehen werden, da dort auch noch andere Links eingebunden sind, welche normal aufgerufen werden.

 

[Sempervivum]

Dieses document.querySelector('a') wirkt nur auf das erste a-Tag auf der Seite, alle anderen werden normal aufgerufen.
Selbstverständlich kannst Du das mit einer Klasse eingrenzen. Wenn es nur ein einziger Link ist, kannst Du bei querySelector bleiben, dann müsste das JS so aussehen:
document.querySelector('a.deine-klasse')

 

[Dragosius]

Danke, das sieht gut aus.

Wie kann ich das denn auf mehrere Links mit der Klasse ausweiten?

 

[Sempervivum]

Auch kein Problem:

<script>
document.querySelectorAll('a.deine-klasse').forEach(item => {
    item.addEventListener('click', event => {
        // Default-Aktion für Klick auf den Link,
        // d. h. direktes Aufrufen der Seite,
        // verhindern, da wir das Linkziel mit Ajax aufrufen wollen:
        event.preventDefault();
        // Link aus dem href-Attribut holen:
        const link = event.target.href;
        fetch(link, {
            method: 'get'
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });
    });
})
</script>";

 

[Dragosius]

Danke, die Antwort ist irgendwie völlig unter gegangen.
ich werde es demnächst testen.

 

[Dragosius]

Ich wollte kurz Bescheid geben, dass ich es soeben erfolgreich getestet habe.
Somit kann ich bei der Software wieder einen Frame einsparen.