web-dev-qa-db-fra.com

Envoyer POST données sur la redirection avec JavaScript / jQuery?

Ce que je veux faire, en gros, c’est d’envoyer des données POST lorsque je modifie le window.location, comme si un utilisateur avait soumis un formulaire et qu’il se dirigeait vers une nouvelle page. Je dois le faire de cette façon parce que je dois transmettre une URL cachée et je ne peux pas simplement la placer dans l’URL en tant que GET pour des raisons esthétiques.

C’est ce que j’ai pour le moment, mais il n’envoie pas de données POST.

if(user has not voted) {

    window.location = 'http://example.com/vote/' + Username;

}

Je sais que vous pouvez envoyer des données POST avec jQuery.post(), mais j’ai besoin de l’envoyer avec le nouveau window.location.

Donc, pour récapituler, je dois envoyer api_url valeur via POST à http://example.com/vote/, tout en envoyant l'utilisateur à la même page au même moment.

Pour référence future, j'ai fini par faire ce qui suit:

if(user has not voted) {

    $('#inset_form').html('<form action="http://example.com/vote/' + Username + '" name="vote" method="post" style="display:none;"><input type="text" name="api_url" value="' + Return_URL + '" /></form>');

    document.forms['vote'].submit();

}
javascriptjquerypost
195
Josh Foskett

Construisez et remplissez un formulaire method=POST action="http://example.com/vote" masqué et soumettez-le, plutôt que d'utiliser window.location.

151
Kevin Reid

pour répondre à @ Kevin-Reid, voici une alternative à l'exemple "J'ai fini par faire ce qui suit", qui évite d'avoir à nommer puis à rechercher l'objet formulaire à nouveau en construisant le formulaire spécifiquement (à l'aide de jQuery).

var url = 'http://example.com/vote/' + Username;
var form = $('<form action="' + url + '" method="post">' +
  '<input type="text" name="api_url" value="' + Return_URL + '" />' +
  '</form>');
$('body').append(form);
form.submit();
200
tardate

Voici une petite fonction simple qui peut être appliquée n’importe où si vous utilisez jQuery.

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, {x: 'example', y: 'abc'});

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            value = value.split('"').join('\"')
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
    }
});
44
tfont

Si vous utilisez jQuery, il existe un plugin de redirection qui fonctionne avec la méthode POST ou GET. Il crée un formulaire avec des entrées cachées et le soumet pour vous. Un exemple de la façon de le faire fonctionner:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

Remarque: Vous pouvez transmettre les types de méthode GET ou POST en tant que troisième paramètre facultatif. POST est la valeur par défaut.

25
Tom Sarduy

Voici une méthode qui n'utilise pas jQuery. Je l'ai utilisé pour créer un bookmarklet, qui vérifie la page en cours sur w3-html-validator.

var f = document.createElement('form');
f.action='http://validator.w3.org/check';
f.method='POST';
f.target='_blank';

var i=document.createElement('input');
i.type='hidden';
i.name='fragment';
i.value='<!DOCTYPE html>'+document.documentElement.outerHTML;
f.appendChild(i);

document.body.appendChild(f);
f.submit();
20
olee

Les réponses ici peuvent être déroutantes, donc je vais vous donner un exemple de code avec lequel je travaille.

Pour commencer, notez qu’il n’existe pas de paramètre POST pour la fonction Java script windows.location à laquelle vous faites référence.

Donc vous devez ...

  1. Créez dynamiquement un formulaire avec un paramètre POST.

  2. Mettez dynamiquement une ou plusieurs zones de texte avec vos valeurs souhaitées à publier

  3. Invoquez le formulaire de soumission que vous avez créé de manière dynamique.

Et pour l'exemple.

     //---------- make sure to link to your jQuery library ----//

<script type="text/javascript" >

    var form = $(document.createElement('form'));
    $(form).attr("action", "test2.php");
    $(form).attr("method", "POST");
    $(form).css("display", "none");

    var input_employee_name = $("<input>")
    .attr("type", "text")
    .attr("name", "employee_name")
    .val("Peter" );
    $(form).append($(input_employee_name));


    var input_salary = $("<input>")
    .attr("type", "text")
    .attr("name", "salary")
    .val("1000" );
    $(form).append($(input_salary));

    form.appendTo( document.body );
    $(form).submit();

</script>

Si tout est bien fait, vous serez redirigé vers test2.php et vous pourrez utiliser POST pour lire les valeurs passées nom_employé et salaire; ce seront Peter et 1000 respectivement.

Sur test2.php, vous pouvez ainsi obtenir vos valeurs.

$employee_name = $_POST['employee_name'];
$salary = $_POST['salary'];

Inutile de dire que vous devez assainir vos valeurs passées.

11
webs

Fonction générique pour poster n'importe quel objet JavaScript sur l'URL donnée.

function postAndRedirect(url, postData)
{
    var postFormStr = "<form method='POST' action='" + url + "'>\n";

    for (var key in postData)
    {
        if (postData.hasOwnProperty(key))
        {
            postFormStr += "<input type='hidden' name='" + key + "' value='" + postData[key] + "'></input>";
        }
    }

    postFormStr += "</form>";

    var formElement = $(postFormStr);

    $('body').append(formElement);
    $(formElement).submit();
}
8
therealrootuser

C'est assez pratique à utiliser:

var myRedirect = function(redirectUrl, arg, value) {
  var form = $('<form action="' + redirectUrl + '" method="post">' +
  '<input type="hidden" name="'+ arg +'" value="' + value + '"></input>' + '</form>');
  $('body').append(form);
  $(form).submit();
};

puis utilisez-le comme:

myRedirect("/yourRedirectingUrl", "arg", "argValue");
6
Ali John
var myRedirect = function(redirectUrl) {
var form = $('<form action="' + redirectUrl + '" method="post">' +
'<input type="hidden" name="parameter1" value="sample" />' +
'<input type="hidden" name="parameter2" value="Sample data 2" />' +
'</form>');
$('body').append(form);
$(form).submit();
};

Code trouvé à l'emplacement http://www.prowebguru.com/2013/10/send-post-data-while-redirecting-with-jquery/

Je vais essayer ceci et d’autres suggestions pour mon travail.

Y a-t-il un autre moyen de faire la même chose?

1
Rajesh

Vous pouvez utiliser l'attribut target pour envoyer un formulaire avec une redirection à partir d'iframe. Votre balise ouverte de formulaire ressemblerait à ceci:

method="post" action="http://some.url.com/form_action" target="_top"
0
joni jones