クライアントからサーバー側にデータを送信

Question

私は現在、単純なWebベースのデータ視覚化ツールを作成しています。私は基本的に、データベースを照会するためにユーザー選択をサーバーに送信できるようにしたいと考えています。問題は、サーバーにデータを送信し、これを行うために相手側でデータを受け取る方法がわかりません。

私は、サーバーにデータを送信する最も一般的なバニラJSの道を作ることであるデータがボタン

var data = { 
 
    Admission_type: ""; 
 
    Gender: ""; 
 
    Max_age: 89, 
 
    Min_age: 0 
 
}; 
 

 
$("#PlotBtn").click(function() { 
 
    
 
});

Answer 1

のクリック時にサーバに送信されるようにしたいですXMLHttpRequest (XHR)。オブジェクトを渡そうとしているようですが、おそらくJSONはサーバーとの間でデータをやりとりする最も柔軟な方法でしょう。だから、サーバーにデータを送信するコードの最も簡単な部分は、このようなものです：

var xhr = new XMLHttpRequest; 
xhr.open("GET", "https://yourserver.domain.com/data"); 
xhr.send(); 

しかしこれは情報のみを送信し、それが応答を処理する方法がありません。情報の送信方法にはさまざまなオプションがありますが、これについては多くの方法がありますが、これはレスポンスを取得するために必要なベアボーンです。

xhr.onload = function(){ 
    console.log(xhr.response); 
}; 

さらに詳しいオプションや他のイベントをご覧になるには、上のリンク先のドキュメントをご覧ください。

Answer 2

ネットワーク経由でデータを送信する方法はたくさんあります。 @Asinusで説明したように、最も一般的な方法はXMLHttpRequest（別名xhr）ですが、最新のブラウザでは目的を達成するためのより良い方法が提供されます。それらの1つはFetch APIです。これは、前身のxhrよりも強力です！

フェッチについてはblog postをご覧ください。ここでは、使用例：あなたがあなたのサーバーにデータを送信する場合は、あなたの場合は

fetch('https://jsonplaceholder.typicode.com/posts/1', { 
    method: 'get' 
}).then(response => { 
    console.log(response.json()); // Response, everything is fine 
}).cath(err => { 
    console.log(err); // Failure: an error occurred 
}); 

、あなたはRestfulなるようにPOST要求をしなければなりません。