web-dev-qa-db-fra.com

accédez à une autre page avec une demande de publication via un lien

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script type="text/javascript">
    function DoPost(){
      $.post("index.html", { name: "John", time: "2pm" } );
   }
    </script>
</head>

<body>
<a href="javascript:DoPost()">GO</a>

</body>
</html>

J'ai fait fonctionner et essayer d'appeler cette fonction, à l'intérieur de cette fonction, j'ai mentionné les URL et les données telles que mentionnées ici . Mais ça ne marche pas pour moi.

NOTE: Même si j'ai mentionné dans le titre de mon message, je tiens également à préciser que je souhaite accéder à une autre page à l'aide de la méthode POST à l'aide d'un simple lien hypertexte.

javascriptjqueryhtmlposthyperlink
14
Ravi

Créez un formulaire html avec toutes les données que vous devez envoyer et spécifiez comme action la page dont vous avez besoin pour transférer l'utilisateur.

<form method="post" id="theForm" action="REDIRECT_PAGE.php">

Ensuite, mettez des champs cachés dans ce formulaire.

<input type="hidden" name="name" value="John">
<input type="hidden" name="time" value="2pm">
</form>

Enveloppez cela à l'intérieur de votre fonction doRedirect et la redirection fonctionnera en soumettant correctement vos données POST.

document.getElementById('theForm').submit()

En remarque, vous souhaiterez peut-être rediriger l'utilisateur vers une page .php et non une page .html si vous devez lire les données POST. Cela dépend de la configuration de votre serveur mais, par défaut, je ne pense pas que vous puissiez exécuter du code PHP dans un fichier .html.

15
Saturnix

Je sais que cette question a presque 4 ans et qu'il y a déjà une réponse acceptée, mais j'aimerais proposer une solution de remplacement ainsi que signaler votre erreur.

Partie 1: La solution

La solution classique pour naviguer avec une requête POST est un formulaire utilisé par la réponse acceptée. Je construirai par-dessus tout en présentant une solution permettant de créer par programmation des formulaires à l'aide de DOM.

var payload = {
  name: 'John',
  time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden'; // no user interaction is necessary
form.method = 'POST'; // forms by default use GET query strings
form.action = 'index.html';
for (key in Object.keys(payload)) {
  var input = document.createElement('input');
  input.name = key;
  input.value = payload[key];
  form.appendChild(input); // add key/value pair to form
}
document.body.appendChild(form); // forms cannot be submitted outside of body
form.submit(); // send the payload and navigate

J'ai utilisé index.html conformément à votre code d'origine, mais je suivrais le conseil de la réponse acceptée et utilisais PHP pour accepter et traiter les données POST.

Partie 2: Le problème

Le problème principal de votre solution d'origine est qu'il utilisait $.post, une fonction d'assistance construite au-dessus de $.ajax. AJAX est destiné à être utilisé lors de la récupération de données d'un serveur et de leur utilisation dans la page actuelle, plutôt que de naviguer vers une autre page.

7
robbie0630

Cela devrait fonctionner très bien ... Semblable à une réponse, mais meilleure.

var payload = {
  name: 'John',
  time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = link;
$.each(Object.keys(payload), function(index, key) {
var input = document.createElement('input');
    input.name = key;
    input.value = payload[key];
    form.appendChild(input)
});
document.body.appendChild(form);
form.submit();
1
IamMHussain

Finalement, je l'ai fait, mais pas exactement comme je le voulais. Mais c'est utile pour moi. Maintenant, partage pour les autres

<html>
  <head>
    <script type="text/javascript">
      function DoPost() {
        document.postlink.submit();
      }   
    </script>
  </head>

  <body>
    <a href="javascript:DoPost()">GO</a>
    <form action="demo.php" name="postlink" method="post">
      <input type="hidden" name="name" value="this is my POST data">
    </form>
  </body>
</html>
0
Ravi
function js_navigate_with_post(js_url, js_post_params)
{
    var js_html='';
    js_html += "<form id='js_navigate_with_post' method='post' action='"+js_url+"'>\n";
    js_html +=  "<input type='hidden' name='js_navigate_with_post' value='true'>\n";
    for (var js_key in js_post_params) {
        if (js_post_params.hasOwnProperty(js_key))
        {
            js_html +=  "<input type='hidden' name='"+js_key+"' value='"+js_post_params[js_key]+"'>\n";
        }
    }
    js_html += "</form>\n";
    jQuery('body').append(js_html);
    jQuery('#js_navigate_with_post').submit();
}
0
ihorsl