2009-10-25 9 views
3

Comment envoyer une requête http avec une méthode post/get en utilisant javascript comme gestionnaire d'événement? Merci! Paulenvoyer une requête http sans XHR dans un gestionnaire d'événements

+5

Ceci est appelé Ajax et Google vous aurait aidé encore plus vite que nous;) –

+0

Désolé je ne faisais pas la question claire: Ce que j'ai essayé de faire est de ne pas utiliser XMLHttpRequest. Est-ce qu'il y a un autre moyen? – Paul

+1

Vous pouvez soumettre un formulaire pour envoyer obtenir ou poster. J'ai ajouté une réponse sur la façon de faire cela. – JAL

Répondre

4

D'accord, vous ne voulez pas utiliser Ajax. Vous pouvez utiliser un gestionnaire d'événements pour soumettre un formulaire!

<a href='#' onclick='cow_submit("zoodle")'>send</a> 
<form method='post' id='formie' action='find_some_action.php'> 
    <input type='hidden' id='snoutvar' name='snoutvar' value='snout'> 
</form> 

<script> 
function cow_submit(a_var_to_set){ 
    var plip=document.getElementById('formie'); 
    var snout=document.getElementById('snoutvar'); 
    snout.value=a_var_to_set; 
    plip.submit(); 
    } 

Voir https://developer.mozilla.org/en/DOM/form

1

Vous pouvez utiliser XMLHttpRequest pour envoyer la demande de javascript

Envoi demande GET

var url = "get_data.php"; 
var params = "lorem=ipsum&name=binny"; 
http.open("GET", url+"?"+params, true); 
http.onreadystatechange = function() {//Call a function when the state changes. 
    if(http.readyState == 4 && http.status == 200) { 
     alert(http.responseText); 
    } 
} 
http.send(null); 

Envoi demande POST

var url = "get_data.php"; 
var params = "lorem=ipsum&name=binny"; 
http.open("POST", url, true); 

//Send the proper header information along with the request 
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
http.setRequestHeader("Content-length", params.length); 
http.setRequestHeader("Connection", "close"); 

http.onreadystatechange = function() {//Call a function when the state changes. 
    if(http.readyState == 4 && http.status == 200) { 
     alert(http.responseText); 
    } 
} 
http.send(params); 

Et ne pas oublier de coder les paramètres à l'aide encodeURIComponent pour param codage de valeur en cas de saisie par l'utilisateur

par exemple.

params="paramName="+encodeURIComponent(paramValue); 
1

utilisation XmlHttpRequest

exemple de code:

var client = new XMLHttpRequest(); 
client.onreadystatechange = handler; 
client.open("GET", "test.xml"); 
client.send(); 

function handler() 
{ 
    // your handler 
} 
0

Ajax Tutoriel (http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html)

var obj; 

function ProcessXML(url) { 
    // native object 

    if (window.XMLHttpRequest) { 
    // obtain new object 
    obj = new XMLHttpRequest(); 
    // set the callback function 
    obj.onreadystatechange = processChange; 
    // we will do a GET with the url; "true" for asynch 
    obj.open("GET", url, true); 
    // null for GET with native object 
    obj.send(null); 
    // IE/Windows ActiveX object 
    } else if (window.ActiveXObject) { 
    obj = new ActiveXObject("Microsoft.XMLHTTP"); 
    if (obj) { 
     obj.onreadystatechange = processChange; 
     obj.open("GET", url, true); 
     // don't send null for ActiveX 
     obj.send(); 
    } 
    } else { 
    alert("Your browser does not support AJAX"); 
    } 
} 


function processChange() { 
    // 4 means the response has been returned and ready to be processed 
    if (obj.readyState == 4) { 
     // 200 means "OK" 
     if (obj.status == 200) { 
      // process whatever has been sent back here: 
     // anything else means a problem 
     } else { 
      alert("There was a problem in the returned data:\n"); 
     } 
    } 
} 
1

La classe standard pour ce faire est XmlHttpRequest, mais il est pas pris en charge universellement. Sur certains navigateurs, vous devez utiliser ActiveXObject("Microsoft.XMLHTTP") à la place. Examinez le système jQuery qui fournit des méthodes de téléchargement HTTP (style AJAX) quelles que soient les API de navigateur sous-jacentes (évitant ainsi une grande partie du code affiché dans la réponse de Tzury).

La documentation jQuery AJAX est à http://docs.jquery.com/Ajax

1

Vous devriez essayer d'ajouter atring dans un champ caché puis appeler le form.submit() pour soumettre votre formulaire dans la page définir en action.

<script type="text/javascript"> 
    function doTestFormSubmit(yourString) { 
    document.getElementById("myString").value=myString; 
    document.getElementById("testForm").submit(); 
    } 
</script> 
<form name="testForm" id="testForm" action="yourDesiredPage.php" method="post"> 
    <input type="hidden" name="myString" id="myString" value=""/> 
</form>