JavaScript: Envoyer POST, rediriger vers la réponse

Question

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

Answer 1

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

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

vous avez alors besoin d'une fonction JavaScript qui présente un HTTP POST asynchrone demande et redirige le navigateur vers une URL reçue de la réponse HTTP. Vous devriez être en mesure d'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 appel vraiment cross-browser XMLHttpRequest, vous pouvez utiliser un cross-browser standard conforme XMLHttpRequest mise en œuvre comme XMLHttpRequest.js, sauf si vous utilisez un cadre JavaScript comme jQuery, Prototype, YUI, ExtJS, et al.

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

Answer 2

Utilisez une image de type 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 que vous allez être redirigé vers « someUrl.html » et un message sera envoyé à lui

Answer 3

Il suffit de lier le bouton à présenter la méthode d'un élément de forme, et la redirection va arriver 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> 

Answer 4

En utilisant jQuery les données en post et redirigent à l'emplacement souhaité comme ceci:

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

Vous pouvez retirer le data: 'formValue=someValue', s'il n'y a pas de données pour passer à la page que vous souhaitez publier sur.

Answer 5

Au lieu de window.location = http.responseText utiliser les éléments suivants:

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 la réponse document.write() insère du code html dans votre page.

Answer 6

Vous pouvez utiliser cette fonction i fait:

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