64 votes

Recharger la fenêtre du navigateur après le POST sans inviter l'utilisateur à renvoyer les données du POST

Lorsqu'un utilisateur visite mon site il y a un lien "Connexion" situé sur chaque page. En cliquant sur ce utilise JavaScript pour afficher une superposition de la fenêtre où l'utilisateur est invité à entrer leurs informations d'identification. Après avoir entré ces informations d'identification d'un appel Ajax est effectuée sur le serveur web afin de les valider; si elles sont valides, un ticket d'authentification cookie est envoyé en arrière et la page est rechargée afin que tout le contenu de la page qui est spécifique aux utilisateurs authentifiés ou le (désormais) utilisateur actuellement connecté est affiché.

Je suis l'accomplissement de la page de rechargement via le script à l'aide de:

window.location.reload();

Cela fonctionne à merveille pour les pages chargées via une requête GET (la grande majorité), mais certaines pages utilisent des formes de publication. Donc, si un utilisateur accède à une de ces pages, effectue une publication, puis choisit de connexion, lorsque l' window.location.reload() script s'exécute ils sont invités boîte de dialogue vous demandant si ils veulent soumettre de nouveau le corps POST.

Resubmit POST body dialog box

J'ai pensé à obtenir autour de ce que je pourrais juste dire au navigateur à recharger la page, donc j'ai essayé:

window.location.href = window.location.href;

Mais le navigateur ne peut pas prendre toute action avec la déclaration ci-dessus, je suppose parce que c'est la pensée de la nouvelle URL est la même que l'ancienne. Si je change la ci-dessus pour:

window.location.href = window.location.pathname;

Il recharge la page, mais je perds les paramètres querystring.

Ma solution actuelle est suffisante, mais pas assez, bref, j'ai virer de bord sur un paramètre de chaîne de requête de l'actuel window.location.href de la valeur et puis attribuer ce retour à l' window.location.href en appelant reloadPage("justLoggedIn"), où l' reloadPage de la fonction est:

function reloadPage(querystringTackon) {
    var currentUrl = window.location.href;

    if (querystringTackon != null && querystringTackon.length > 0 && currentUrl.indexOf(querystringTackon) < 0) {
        if (currentUrl.indexOf("?") < 0)
            currentUrl += "?" + querystringTackon;
        else
            currentUrl += "&" + querystringTackon;
    }

    window.location.href = currentUrl;
}

Cela fonctionne, mais il en résulte dans l'URL en cours www.example.com/SomeFolder/SomePage.aspx?justLoggedIn, ce qui semble collante.

Est-il un moyen en JavaScript pour lui faire faire un reload et invite pas l'utilisateur de soumettre à nouveau les données POST? J'ai besoin de faire en sorte que tous les paramètres de chaîne de requête ne sont pas perdus.

53voto

peaceslp Points 173
 window.location.href = window.location.href;
 

Ne me demandez pas pourquoi ça marche..mais ça marche :). Tout comme le moteur JS interprète la logique, je suppose.

9voto

Daniel Doezema Points 1328

Ce que vous devez probablement faire est de rediriger l'utilisateur une fois le script POST / Form Handler exécuté.

En PHP, cela se fait comme si ...

 <?php
// ... Handle $_POST data, maybe insert it into a database.
// Ok, $_POST data has been handled, redirect the user
header('Location:success.php');
die();
?>
 

... cela devrait vous permettre d'actualiser la page sans obtenir l'avertissement "Envoyer les données à nouveau".

Vous pouvez même rediriger vers la même page (si c'est ce que vous publiez) car les variables POST ne seront pas envoyées dans les en-têtes (et ne seront donc plus là pour être rediffusées lors de l'actualisation).

7voto

Cela fonctionne aussi:

 window.location.href = window.location.pathname + window.location.search
 

5voto

Utilisation

 RefreshForm.submit(); 
 

au lieu de

 document.location.reload(true); 
 

3voto

J'ai eu le même problème que toi.

Voici ce que j'ai fait (formulaire GET généré dynamiquement avec l'action définie sur location.href, entrée masquée avec une nouvelle valeur) et il semble fonctionner dans tous les navigateurs:

 var elForm=document.createElement("form");
elForm.setAttribute("method", "get");
elForm.setAttribute("action", window.location.href);

var elInputHidden=document.createElement("input");
elInputHidden.setAttribute("type", "hidden");
elInputHidden.setAttribute("name", "r");
elInputHidden.setAttribute("value", new Date().getTime());
elForm.appendChild(elInputHidden);

if(window.location.href.indexOf("?")>=0)
{
    var _arrNameValue;
    var strRequestVars=window.location.href.substr(window.location.href.indexOf("?")+1);
    var _arrRequestVariablePairs=strRequestVars.split("&");
    for(var i=0; i<_arrRequestVariablePairs.length; i++)
    {
        _arrNameValue=_arrRequestVariablePairs[i].split("=");

        elInputHidden=document.createElement("input");
        elInputHidden.setAttribute("type", "hidden");
        elInputHidden.setAttribute("name", decodeURIComponent(_arrNameValue.shift()));
        elInputHidden.setAttribute("value", decodeURIComponent(_arrNameValue.join("=")));
        elForm.appendChild(elInputHidden);
    }
}

document.body.appendChild(elForm);
elForm.submit();
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X