Question JavaScript: Envoi POST, redirection vers la réponse


J'ai une image avec un onclick. Lorsque l'événement click se déclenche, je souhaite envoyer un HTTP POST et avoir la redirection window.location vers la réponse au POST. Comment puis je faire ça?


10
2018-02-08 19:43


origine


Réponses:


Liez simplement le bouton à la méthode submit d'un élément de formulaire et la redirection se fera naturellement.

<script type='text/javascript'>
 function form_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script>

<form method='post' action='your_post_url.html' id='the_form'>
  <input type='hidden' value='whatever'>
</form>

<span id='subm' onclick='form_send()'>Submit</span>

15
2018-02-08 19:56



En supposant que vous ayez besoin d'envoyer la demande POST de manière asynchrone, vous pouvez vérifier l'exemple ci-dessous pour vous aider à aller dans la bonne direction:

<img src="my_image.png" onClick="postOnClick();">

Ensuite, vous avez besoin d'une fonction JavaScript qui soumet une requête HTTP POST asynchrone et redirige le navigateur vers une URL reçue de la réponse HTTP. Vous devriez pouvoir utiliser XMLHttpRequest pour un tel appel asynchrone, comme dans l'exemple suivant:

function postOnClick()
{
    var http = new XMLHttpRequest();

    var params = "arg1=value1&arg2=value2";

    http.open("POST", "post_data.php", true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            window.location = http.responseText;
        }
    }

    http.send(params);
}

Notez que pour un véritable navigateur XMLHttpRequest call, vous souhaiterez peut-être utiliser une implémentation XMLHttpRequest multi-navigateurs conforme XMLHttpRequest.js, sauf si vous utilisez un framework JavaScript tel que jQuery, Prototype, YUI, ExtJSet al.

En outre, notez également que ce qui précède ne fonctionnera que si vous publiez sur un script hébergé dans le même domaine, sinon vous violerez le politique de même origine et les navigateurs Web modernes refuseront d'envoyer la demande.


13
2018-02-08 19:50



Au lieu de window.location = http.responseText utilisez le suivant:

http.onreadystatechange = function() {
  if (http.readyState == 4 && http.status == 200) {
    document.open();
    document.write(http.responseText);
  }
}

document.open() efface le contenu actuel de la page et document.write() Insère le code HTML de la réponse dans votre page.


3
2018-04-21 18:55



En utilisant jQuery affichez les données et redirigez-les vers l'emplacement souhaité, comme suit:

$.ajax({
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data){
      window.location = data;
  }
});

Vous pouvez supprimer le data: 'formValue=someValue', S'il n'y a pas de données à transmettre à la page que vous souhaitez publier.


2
2018-02-08 20:06



Vous pourriez utiliser cette fonction que j'ai faite:

http://jsfiddle.net/cgarciagl/KU4B6/


2
2017-09-18 17:21



Utilisez une image de type d'entrée.

<form action="someUrl.html" method="POST">
    <input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>

En cliquant sur l'image, vous serez redirigé vers "someUrl.html" et un message lui sera envoyé


1
2018-02-08 19:54