transmettre les données de publication avec window.location.href

113

Lorsque j'utilise window.location.href, j'aimerais transmettre les données POST à ​​la nouvelle page que j'ouvre. est-ce possible en utilisant JavaScript et jQuery?

Brian
la source
11
La configuration window.location.hreffait une demande GET pour la nouvelle URL, pas POST.
Chetan S

Réponses:

85

En utilisant, window.location.hrefil n'est pas possible d'envoyer une requête POST.

Ce que vous devez faire est de configurer une formbalise avec des champs de données, de définir l' actionattribut du formulaire sur l'URL et l' methodattribut sur POST, puis d'appeler la submitméthode sur la formbalise.

Guffa
la source
J'ai des données provenant de 3 formulaires différents et j'essaie d'envoyer les 3 formulaires sur la même page, donc j'ai essayé de sérialiser les formulaires avec jQuery et de les envoyer d'une autre manière
Brian
@Brian: Tu ne peux pas tout mettre en un form, donc tout est envoyé automatiquement ensemble?
Marcel Korpel
Un formulaire se trouve dans une boîte de dialogue jQueryUI - je ne peux donc pas les inclure tous.
Brian
12
Extrayez toutes leurs valeurs, créez dynamiquement un formulaire avec tous les champs des trois formulaires et soumettez ce formulaire. Le formulaire peut être invisible. N'utilisez pas de méthode JQuery AJAX, utilisez $("#myForm").submit(). Le formulaire - qui sera invisible et utilisé uniquement pour soumettre des valeurs à partir de votre code côté client, et non une entrée utilisateur - ne sera jamais affiché ni utilisé d'une autre manière, et la page sera actualisée.
Matt Luongo
79

Ajoutez un formulaire à votre HTML, quelque chose comme ceci:

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

et utilisez JQuery pour remplir ces valeurs (bien sûr, vous pouvez également utiliser javascript pour faire quelque chose de similaire)

$("#var1").val(value1);
$("#var2").val(value2);

Puis enfin soumettre le formulaire

$("#form").submit();

côté serveur, vous devriez être en mesure d'obtenir les données que vous avez envoyées en vérifiant var1et var2, comment faire cela dépend de la langue côté serveur que vous utilisez.

Mohamed Khamis
la source
lorsque je fais cela, mon navigateur redirige vers le domaine / non défini. Qu'est-ce que je fais mal?
vigamage le
9

Utilisez ce fichier: "jquery.redirect.js"

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

voir https://github.com/mgalante/jquery.redirect

Mohd Tauovir Khan
la source
9

Comme cela a été dit dans d'autres réponses, il n'y a aucun moyen de faire une requête POST en utilisant window.location.href, pour ce faire, vous pouvez créer un formulaire et le soumettre immédiatement.

Vous pouvez utiliser cette fonction:

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158

Jet d'eau
la source
8

Réponse courte: non. window.location.hrefn'est pas capable de transmettre des données POST.

Réponse un peu plus satisfaisante: vous pouvez utiliser cette fonction pour cloner toutes vos données de formulaire et les soumettre.

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}
  • Faites submitMe.importFields(form_element);pour chacun des trois formulaires que vous souhaitez soumettre.
  • Cette fonction ajoutera le nom de chaque formulaire aux noms de ses entrées enfants (si vous avez un <input name="email">in <form name="login">, le nom soumis sera login_name.
  • Vous pouvez changer la nameJoinervariable en autre chose que _pour qu'elle n'entre pas en conflit avec votre schéma de dénomination d'entrée.
  • Une fois que vous avez importé tous les formulaires nécessaires, faites submitMe.submit();
Joequincy
la source
4

c'est aussi simple que ça

$.post({url: "som_page.php", 
    data: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

J'ai dû résoudre ce problème pour verrouiller l'écran de mon application où je devais transmettre des données sensibles en tant qu'utilisateur et l'url où il travaillait. Ensuite, créez une fonction qui exécute ce code

Sergio Roldan
la source
1
Ou dans l' done()ensemble de fonctionswindow.location.href
Chris Edwards
Oui @ChrisEdwards, dans mon exemple, j'essaie d'utiliser les données de retour de jquery post. J'espère que ce serait utile à quelqu'un.
Sergio Roldan
3

Avez-vous envisagé d'utiliser simplement le stockage local / de session? -ou- Selon la complexité de ce que vous construisez; vous pouvez même utiliser indexDB.

remarque :

Local storageet indexDBne sont pas sécurisés - vous voulez donc éviter de stocker des données sensibles / personnelles (c'est-à-dire noms, adresses, adresses e-mail, date de naissance, etc.) dans l'un ou l'autre de ces éléments.

Session Storage est une option plus sécurisée pour tout ce qui est sensible, elle n'est accessible qu'à l'origine qui a défini les éléments et s'efface également dès que le navigateur / l'onglet est fermé.

IndexDBest un peu plus [mais pas beaucoup plus] compliqué et est 30MB noSQL databaseintégré à chaque navigateur (mais peut être fondamentalement illimité si l'utilisateur opte) -> la prochaine fois que vous utilisez Google docs, ouvrez DevTools -> application -> IndexDB et prendre un pic. [alerte spoiler: c'est crypté].

Se concentrer sur Localet Session Storage; ce sont tous les deux très simples à utiliser:

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

Si simple n'est pas votre truc -ou- peut-être que vous voulez sortir de la route et essayer une approche différente tous ensemble -> vous pouvez probablement utiliser un shared web worker... vous savez, juste pour les coups de pied.

Down_with_opp
la source
-4

Vous pouvez utiliser GET au lieu de pass, mais n'utilisez pas cette méthode pour les valeurs importantes,

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

Dans le CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Kissa Mia
la source
3
sa méthode GET mais la question est la méthode POST buddy
Thamaraiselvam
@thamaraiselvam Kissa Mia n'a peut-être pas bien formulé la réponse, mais elle a raison sur l'itinéraire GET ici. La question n'est pas liée à l'utilisation de la méthode POST - l'utilisateur a simplement demandé s'il y avait un moyen de prendre des données POST et de les envoyer via window.location.href. Et vous devez d'abord savoir que Window.location.href EST une requête GET. Cette réponse n'est pas fausse - il ne sera tout simplement pas facile de s'adapter à un grand nombre de champs de formulaire, codés en tant que QueryString. Cependant, le moyen le plus évident d'envoyer des données via une URL (ce que vous pouvez modifier avec window.location.href) est via les paramètres de chaîne de requête.
SylonZero
@SylonZero Vous ne pouvez pas attacher de données POST à ​​une requête GET. Il s'agit de différents types de requêtes et les données sont différentes dans un POST. Les parties importantes de la spécification HTTP sont assez courtes.
Colin vH du
@ColinvH Vous devez lire plus attentivement ce que j'ai écrit. Version TLDR: vous pouvez prendre les données qui seraient utilisées pour générer un POST et les encoder en tant que paramètres de chaîne de requête.
SylonZero du