JavaScript:AjaxでJSONオブジェクトを送信しますか?


151

これは可能ですか?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

多分:ヘッダーcontent type::application/json?:

xmlHttp.setRequestHeader('Content-Type', 'application/json')

そうでなければ私は使うことができます:

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

そしてJSON.stringify、JSONオブジェクトをパラメーターに入れて送信しますが、可能であれば、この方法で送信すると便利です。

回答:


330

jQueryの場合:

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

jQueryなし:

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

2
しかし、私はcontent-typeを使用できます:application/x-www-form-urlencodedstringifyを使用する場合も、使用するポイントは何application/jsonですか?:)
Adam

4
@CIRK:どうしたの?サーバーがどちらか一方を特別に処理しない限り、コンテンツタイプの設定は完全に任意です。1日の終わりにデータがやり取りされるだけです。
mellamokb

17
投稿の本文がJSONであることが期待される場合(例:({name: "John"、time: "2pm"})コンテンツタイプapplication / jsonを使用します。投稿の本文がurlencodedデータ(name = John&time = 2pm)の場合application / x-www-form-urlencoded
Nathan Romano

1
URLはどこに置くべきですか?
アーロン・リュー

6
@ShuruiLiu URLは"/json-handler"open()メソッドの2 番目のパラメーターとして代わりに使用されます
Alexandr Nil

36

jQueryを使用していない場合は、次のことを確認してください。

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

そしてPHPの受信側について:

 $_POST['json_name'] 

直接使用できませんか?
rohitsakala 2016

8
これが質問の答えになるとは思いません。開発者は、URLエンコードされたラッパーではなく、Content-Type:application / jsonとしてJSONのblobをPHPに送信したいと考えています。
Fordi

1
これは実際にはJSONを送信しているのではなく、formdataを送信しています。JSONを直接送信することもできます。その場合、$ _ POSTで読み取ることはできませんが、代わりにjson_decode(file_get_contents( 'php:// input'));で読み取ることができます。
David

親愛なる友人、このPOST ajaxを、ページで使用する必要なコード全体と共有できますか?または、JSONを使用したバニラajax POSTの完全な動作例への親切なリンクがある場合も同様に感謝します
Robert

1

IDの複数の配列を渡してBLOBを返すので、何日か私に役立つ何かを見つけるのに苦労しました。2.1を使用している.NET COREを使用している場合は、[FromBody]を使用する必要があり、データを保持するビューモデルを作成する必要がある場合にのみ使用できます。

以下のようなコンテンツをまとめ、

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

私の場合、私はすでに配列をjsonし、結果を関数に渡しました

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

次に、XMLHttpRequest POSTを呼び出し、オブジェクトを文字列化します

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

次に、このようなモデルがあります

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

次に、次のようなアクションを渡します

public async Task<IActionResult> MyAction([FromBody] MyModel model)

ファイルを返す場合は、このアドオンを使用してください

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.