JSONをサーバーに送信し、代わりにJSONをJQueryなしで取得する


115

JSON(文字列化できます)をサーバーに送信し、JQueryを使用せずにユーザー側で結果のJSONを取得する必要があります。

GETを使用する必要がある場合、JSONをパラメーターとして渡すにはどうすればよいですか?長すぎるリスクはありますか?

POSTを使用する必要があるonload場合、GETで関数に相当するものをどのように設定しますか?

または別の方法を使用する必要がありますか?

リマーク

この質問は、単純なAJAXの送信に関するものではありません。重複して閉じないでください。


を使用する必要がありますXMLHttpRequest。名前にもかかわらず、JSONデータに使用できます(実際には、jQueryがバックグラウンドで行う方法です)。
エリクセニド2014年

2
データをPOSTします。これを見てください:youmightnotneedjquery.com。これは、バニラJSでデータを取得/投稿する方法を示しています。
HaukurHaf 14年

1
@Ed Cottrell参照されている質問はこれとは関係ありません。参照は、(ただ)sendingajaxリクエストを取り扱っており、これは非常に一般的なことです。これは、純粋なJavaScriptで求められてsendingreceiving JSONます。さらに、このJSONを返送するには、問題のこの部分を解決する方法を知っている必要があります。server-sideこれは、参照されている質問で言及されていない別の問題です。
hex494D49 14

1
@Ed Cottrell参照した質問には承認された回答がなく、古い方法を使用してAjaxリクエストを作成しています。この質問に対する完全な回答は提供していません。私の質問は、従来のAjax POSTまたはGETよりも微妙です。あなたは要点を逃した。
ジェローム・Verstrynge

1
@JVerstry onreadystatechangeonload、以下の受け入れられた回答で示されているように、エミュレートに使用するものです。解析にはJSON.parse()(もう一度、答えに示されているように)を使用しますが、質問で文字列化について言及したので、あなたはすでにそれを知っていると思いました。私はこれらの点をカバーする1つではなく2つの質問をあなたに指摘することによってあなたを助けることを試みました。明らかにいくつかの違いがあります-2つの質問がまったく同じになることはめったにありません-しかし、JSONを文字列化して解析する方法をすでに知っているなら、それは取るに足らないことです。そうは言っても、あなたと@ hex494D49は同意しないので、私はこれを再開のために指名します。
エリクセニド2014

回答:


221

POSTメソッドを使用したJSON形式でのデータの送受信

// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
var data = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
xhr.send(data);

GETメソッドを使用してJSON形式でデータを送受信する

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "hey@mail.com", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
xhr.send();

PHPを使用してサーバー側でJSON形式のデータを処理する

<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>

HTTP Getリクエストの長さの制限は、サーバーとクライアント(ブラウザ)の両方に依存します(2kB〜8kB)。URIがサーバーが処理できる長さより長い場合、サーバーは414(Request-URI Too Long)ステータスを返す必要があります。

状態値の代わりに状態名を使用できると誰かが言った。つまり、xhr.readyState === xhr.DONE代わりに使用できますxhr.readyState === 4。問題は、Internet Explorerが異なる状態名を使用するため、状態値を使用する方がよいということです。


4
する必要がありますxhr.status === 200
QED

同じコードを使用して、ローカルホストでホストされているREST APIにJSONデータを投稿していますが、エラーが発生しますXHR failed loading: POST
viveksinghggits

@viveksinghggits最初に、上記のコードがローカルホストで機能するかどうかを確認します。動作する場合(動作するはずです)、問題はサーバー側のどこかにあるはずです。表示されない場合はお知らせください。確認します。このように、あなたのコードがないので、私はあなたを助けることができません。
hex494D49 2017

@ hex494D49返信ありがとうございます。フォームの送信アクションで実際にXHRを発動していましたが、クリックイベントによって発動されるように変更しました。私はCORSエラーを受け取りました。それは理解でき、そのためにサーバー側のコードを変更しています。私はここでそれについて書いたmedium.com/@viveksinghggits/...
viveksinghggits

6

新しいAPI フェッチの使用:

const dataToSend = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
let dataReceived=""; 
fetch("",{credentials:'same-origin',mode:'same-origin',method:"post",body:dataToSend})
              .then(resp => {
                if(resp.status==200){
                   return resp.json()
                }else{
                    console.log("Status: "+resp.status);
                    return Promise.reject("server")
                }
              })
           .then(dataJson =>{
                 dataReceived = JSON.parse(dataJson);
             })
              .catch(err =>{
                if(err=="server")return
                console.log(err);
            })
            
 console.log(`Received: ${dataReceived}`)                
サーバーが200(ok)ではなく他のステータスを送信するときに処理する必要があります。空白のままにすると、jsonを解析しようとしますが、そうでないため、エラーをスローするため、その結果を拒否する必要があります。


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