web-dev-qa-db-ja.com

送る POST XMLHttpRequestを使用したデータ

JavaScriptのXMLHttpRequestを使用してデータを送信したいのですが。

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>

JavaScriptでXMLHttpRequestを使用して同等のものを書くにはどうすればいいですか？

javascriptajaxpostxmlhttprequest
443
Jack Greenhill

以下のコードはこれを行う方法を示しています。

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);
637
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');

あるいはブラウザのサポートに頼ることができれば 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);
232
uKolka

最新のJavaScriptを使用してください。

私はfetchを調べることをお勧めします。これはES5と同等で、Promiseを使用しています。もっと読みやすく、カスタマイズも簡単です。

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)
);

Node.jsでは、次のようにしてfetchをインポートする必要があります。

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

同期的に使用したい場合（トップスコープでは動作しません）：

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

もっと詳しく

Mozillaドキュメント

使用できますか（91％2019年3月）

マットウォルシュチュートリアル

45
Gibolt

AJAXリクエストを送信するためのFormDataの最小限の使用

<!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>

備考

  1. ユーザーが要求を送信するためにクリックする必要があるので、これはOP質問に完全には答えません。しかし、これはこの種の単純な解決策を探している人には役に立つかもしれません。

  2. この例は非常に単純で、GETメソッドをサポートしません。もっと洗練された例に興味があるなら、すばらしい MDNドキュメンテーション を見てください。 Post HTML Formへの XMLHttpRequestに関する類似の回答も参照してください 。

  3. このソリューションの制限： Justin Blank および Thomas Munk （コメントを参照）が指摘するように、FormDataはIE9以下、およびAndroid 2.3のデフォルトのブラウザではサポートされていません。

32
olibre

プラグインは必要ありません！

BOOKMARK BAR にリンクをドラッグする（すなわち THIS LINK ）、そしてブラウザ設定から有効にする _ edit _ そのリンク：

enter image description here

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);

これですべてです。 これで任意のWebサイトにアクセスして、 BOOKMARK BAR のボタンをクリックできます。

注意：

上記のメソッドはXMLHttpRequestメソッドを使用してデータを送信するので、スクリプトを起動する間は同じドメインにいる必要があります。そのため、コードを任意のドメインに送信できるシミュレートされたFORM SUBMITTINGを使用してデータを送信することを好みます。そのためのコードは次のとおりです。

 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);
23
T.Todua

これが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>

バックエンドAPIがJSONを解析できることを確認してください。

たとえば、Express JSでは次のようになります。

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

私は同じ投稿を使用して同様の問題に直面しています、そしてこの link 私は私の問題を解決しました。

 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);

この link は情報を補完しました。

4
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");
}
2
toto

機能の読者がこの質問を見つけるためだけに。与えられたパスがある限り、受け入れられた答えは問題なく機能することがわかりましたが、空白のままにするとIEで失敗します。ここに私が思いついたものがあります：

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));
}

次のようにできます：

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

これに触れるいくつかの重複がありますが、実際に説明している人はいません。説明のために受け入れられた答えの例を借ります

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

説明のために、これを単純化しすぎました（その答えの古い方法論の代わりにhttp.onload(function() {})を使用しています）。これをそのまま使用すると、サーバーがおそらくPOST本体を実際のkey=valueパラメーターではなく文字列として解釈していることに気付くでしょう（つまり、PHPは$_POST変数を表示します）。 mustフォームヘッダーを渡して取得し、http.send()の前に実行します

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

URLエンコードされたデータではなくJSONを使用している場合は、代わりにapplication/jsonを渡します

0
Machavity