[解決済み] JQueryを使わずに、JSONをサーバーに送信し、JSONを取得する。
2022-06-13 06:56:47
質問
JQueryを使わずに、(文字列化できる)JSONをサーバーに送信し、ユーザー側で結果のJSONを取得する必要があるのですが、どうすればよいでしょうか?
GETを使用する場合、JSONをどのようにパラメータとして渡せばよいでしょうか。長すぎるというリスクはありますか?
POSTを使用する場合、どのようにして
onload
関数をGETで使用するのでしょうか?
それとも別の方法を使うべきでしょうか?
備考
この質問は、単純なAJAXを送信することに関するものではありません。それは重複として閉じられるべきではありません。
どのように解決するのですか?
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": "[email protected]", "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": "[email protected]", "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が異なる状態名を使用しているため、状態値を使用する方が良いということです。
関連
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] Chromeを使用してASP.NET Web APIがXMLの代わりにJSONを返すようにするにはどうすればよいですか?
-
[解決済み] Node.JSを使用して、JSONファイルを(サーバー)メモリに読み込むにはどうすればよいですか?
-
[解決済み] cURL を使ってファイル付き POST データをアップロードする
-
[解決済み] ajaxポストからのファイルダウンロードを処理する
-
[解決済み] Ajaxを使用して1つのフォームでデータとファイルの両方をアップロードする?
-
[解決済み】jQueryでGETリクエストにパラメータを渡す方法
-
[解決済み】jQueryがリクエストボディに有効なjsonを投稿する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] XMLHttpRequestでPOSTデータを送信する