web-dev-qa-db-fra.com

Envoyer des données POST à l'aide de XMLHttpRequest

J'aimerais envoyer des données en utilisant XMLHttpRequest en JavaScript.

Disons que j'ai le formulaire suivant en HTML:

<form name="inputform" action="somewhere" method="post">
    <input type="hidden" value="person" name="user">
    <input type="hidden" value="password" name="pwd">
    <input type="hidden" value="place" name="organization">
    <input type="hidden" value="key" name="requiredkey">
</form>

Comment puis-je écrire l'équivalent en utilisant XMLHttpRequest en JavaScript?

javascriptajaxpostxmlhttprequest
467
Jack Greenhill

Le code ci-dessous montre comment procéder.

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=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.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);
664
Ed Heal
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');

Ou si vous pouvez compter sur le support du navigateur, vous pouvez utiliser FormData :

var data = new FormData();
data.append('user', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send(data);
241
uKolka

Utilisez JavaScript moderne!

Je suggérerais de regarder dans fetch. C'est l'équivalent ES5 et utilise Promises. Il est beaucoup plus lisible et facilement personnalisable.

const url = "http://example.com";
fetch(url, {
    method : "POST",
    body: new FormData(document.getElementById("inputform")),
    // -- or --
    // body : JSON.stringify({
        // user : document.getElementById('user').value,
        // ...
    // })
}).then(
    response => response.text() // .json(), etc.
    // same as function(response) {return response.text();}
).then(
    html => console.log(html)
);

Dans Node.js, vous devez importer fetch en utilisant:

const fetch = require("node-fetch");

Si vous souhaitez l’utiliser de manière synchrone (ne fonctionne pas dans le top scope):

const json = await fetch(url, optionalOptions)
  .then(response => response.json()) // .text(), etc.
  .catch((e) => {});

Plus d'informations:

Documentation Mozilla

Puis-je utiliser (93% août 2019)

Tutoriel Matt Walsh

56
Gibolt

Utilisation minimale de FormData pour soumettre une demande AJAX

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert (xhr.responseText); } // success case
  xhr.onerror = function(){ alert (xhr.responseText); } // failure case
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="post" action="somewhere" onsubmit="return submitForm(this);">
  <input type="hidden" value="person"   name="user" />
  <input type="hidden" value="password" name="pwd" />
  <input type="hidden" value="place"    name="organization" />
  <input type="hidden" value="key"      name="requiredkey" />
  <input type="submit" value="post request"/>
</form>
</body>
</html>

Remarques

  1. Cela ne répond pas complètement à la question OP, car il oblige l'utilisateur à cliquer pour soumettre la demande. Mais cela peut être utile aux personnes recherchant ce type de solution simple.

  2. Cet exemple est très simple et ne prend pas en charge la méthode GET. Si vous êtes intéressé par des exemples plus sophistiqués, veuillez consulter l'excellent documentation MDN . Voir aussi réponse similaire à propos de XMLHttpRequest to Post HTML Form .

  3. Limitation de cette solution: Comme indiqué par Justin Blank et Thomas Munk (voir leurs commentaires), FormData n'est pas pris en charge par IE9 et versions antérieures, et le navigateur par défaut sur Android 2.3.

32
olibre

Voici une solution complète avec application-json:

// Input values will be grabbed by ID
<input id="loginEmail" type="text" name="email" placeholder="Email">
<input id="loginPassword" type="password" name="password" placeholder="Password">

// return stops normal action and runs login()
<button onclick="return login()">Submit</button>

<script>
    function login() {
        // Form fields, see IDs above
        const params = {
            email: document.querySelector('#loginEmail').value,
            password: document.querySelector('#loginPassword').value
        }

        const http = new XMLHttpRequest()
        http.open('POST', '/login')
        http.setRequestHeader('Content-type', 'application/json')
        http.send(JSON.stringify(params)) // Make sure to stringify
        http.onload = function() {
            // Do whatever with response
            alert(http.responseText)
        }
    }
</script>

Assurez-vous que votre API dorsale peut analyser JSON.

Par exemple, dans Express JS:

import bodyParser from 'body-parser'
app.use(bodyParser.json())
28
agm1984

AUCUN PLUGINS NÉCESSAIRE!

Il suffit de faire glisser un lien (c.-à-d. CE LIEN ) dans BOOKMARK BAR (si vous ne le voyez pas, activez les paramètres du navigateur), puis ÉDITEZ ce lien:

enter image description here

et insérez le code javascript:

javascript:var my_params = Prompt("Enter your parameters", "var1=aaaa&var2=bbbbb"); var Target_LINK = Prompt("Enter destination", location.href); function post(path, params) { var xForm = document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } var xhr = new XMLHttpRequest(); xhr.onload = function () { alert(xhr.responseText); }; xhr.open(xForm.method, xForm.action, true); xhr.send(new FormData(xForm)); return false; } parsed_params = {}; my_params.split("&").forEach(function (item) { var s = item.split("="), k = s[0], v = s[1]; parsed_params[k] = v; }); post(Target_LINK, parsed_params); void(0);

C'est tout! Vous pouvez désormais visiter n'importe quel site Web et cliquer sur ce bouton dans BARRE DE RÉSERVEUR !

REMARQUE:

La méthode ci-dessus envoie des données à l'aide de la méthode XMLHttpRequest. Vous devez donc être sur le même domaine lors du déclenchement du script. C'est pourquoi je préfère envoyer des données avec un formulaire de soumission simulé, qui peut envoyer le code à n'importe quel domaine - voici le code pour cela:

 javascript:var my_params=Prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=Prompt("Enter destination", location.href); function post(path, params) {   var xForm= document.createElement("form");   xForm.setAttribute("method", "post");   xForm.setAttribute("action", path); xForm.setAttribute("target", "_blank");   for(var key in params) {   if(params.hasOwnProperty(key)) {        var hiddenField = document.createElement("input");      hiddenField.setAttribute("name", key);      hiddenField.setAttribute("value", params[key]);         xForm.appendChild(hiddenField);     }   }   document.body.appendChild(xForm);  xForm.submit(); }   parsed_params={}; my_params.split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0);
24
T.Todua

J'ai rencontré un problème similaire, en utilisant le même message et et ceci lien j'ai résolu mon problème.

 var http = new XMLHttpRequest();
 var url = "MY_URL.Com/login.aspx";
 var params = 'eid=' +userEmailId+'&amp;pwd='+userPwd

 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);// all browser wont support Refused to set unsafe header "Content-Length"
 //http.setRequestHeader("Connection", "close");//Refused to set unsafe header "Connection"

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

Ce lien contient des informations complètes.

5
Laxman G
var util = {
    getAttribute: function (dom, attr) {
        if (dom.getAttribute !== undefined) {
            return dom.getAttribute(attr);
        } else if (dom[attr] !== undefined) {
            return dom[attr];
        } else {
            return null;
        }
    },
    addEvent: function (obj, evtName, func) {
        //Primero revisar attributos si existe o no.
        if (obj.addEventListener) {
            obj.addEventListener(evtName, func, false);

        } else if (obj.attachEvent) {
            obj.attachEvent(evtName, func);
        } else {
            if (this.getAttribute("on" + evtName) !== undefined) {
                obj["on" + evtName] = func;
            } else {
                obj[evtName] = func;
            }

        }

    },
    removeEvent: function (obj, evtName, func) {
        if (obj.removeEventListener) {
            obj.removeEventListener(evtName, func, false);
        } else if (obj.detachEvent) {
            obj.detachEvent(evtName, func);
        } else {
            if (this.getAttribute("on" + evtName) !== undefined) {
                obj["on" + evtName] = null;
            } else {
                obj[evtName] = null;
            }
        }

    },
    getAjaxObject: function () {
        var xhttp = null;
        //XDomainRequest
        if ("XMLHttpRequest" in window) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhttp;
    }

};

//START CODE HERE.

var xhr = util.getAjaxObject();

var isUpload = (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));

if (isUpload) {
    util.addEvent(xhr, "progress", xhrEvt.onProgress());
    util.addEvent(xhr, "loadstart", xhrEvt.onLoadStart);
    util.addEvent(xhr, "abort", xhrEvt.onAbort);
}

util.addEvent(xhr, "readystatechange", xhrEvt.ajaxOnReadyState);

var xhrEvt = {
    onProgress: function (e) {
        if (e.lengthComputable) {
            //Loaded bytes.
            var cLoaded = e.loaded;
        }
    },
    onLoadStart: function () {
    },
    onAbort: function () {
    },
    onReadyState: function () {
        var state = xhr.readyState;
        var httpStatus = xhr.status;

        if (state === 4 && httpStatus === 200) {
            //Completed success.
            var data = xhr.responseText;
        }

    }
};
//CONTINUE YOUR CODE HERE.
xhr.open('POST', 'mypage.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');


if ('FormData' in window) {
    var formData = new FormData();
    formData.append("user", "aaaaa");
    formData.append("pass", "bbbbb");

    xhr.send(formData);

} else {

    xhr.send("?user=aaaaa&pass=bbbbb");
}
4
toto

Juste pour les lecteurs de fonctionnalité qui trouvent cette question. J'ai trouvé que la réponse acceptée fonctionne bien tant que vous avez un chemin donné, mais si vous le laissez vide, cela échouera dans IE. Voici ce que je suis venu avec:

function post(path, data, callback) {
    "use strict";
    var request = new XMLHttpRequest();

    if (path === "") {
        path = "/";
    }
    request.open('POST', path, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.onload = function (d) {
        callback(d.currentTarget.response);
    };
    request.send(serialize(data));
}

Vous pouvez vous en donner envie

post("", {orem: ipsum, name: binny}, function (response) {
    console.log(respone);
})
0
Sebastian Td

Il y a des doublons qui touchent cela, et personne ne l'explique vraiment. Je vais emprunter l'exemple de réponse accepté pour illustrer

http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');

J'ai simplifié à l'excès ceci (j'utilise http.onload(function() {}) à la place de l'ancienne méthodologie de cette réponse) à des fins d'illustration. Si vous l'utilisez tel quel, votre serveur interprétera probablement le corps POST comme une chaîne et non comme un paramètre key=value réel (c'est-à-dire que PHP ne sera pas affichez les variables $_POST). Vous devez passez l'en-tête de formulaire pour l'obtenir, et le faire avant http.send()

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Si vous utilisez JSON et non des données codées en URL, transmettez application/json à la place.

0
Machavity