JavaScript POST

1. JavaScript で XHR(XML HTTP Request) を使用してフォームなしで POST データを送信する
2. JavaScript で Fetch API を使用してフォームなしで POST データを送信する
3. JavaScript で Navigator.sendBeacon() を使用してフォームなしで POST データを送信する

このチュートリアルでは、JavaScript のフォームを使用せずに記事データを送信する方法を説明します。

JavaScript で XHR(XML HTTP Request) を使用してフォームなしで POST データを送信する

XHR は、JavaScript で HTTP リクエストを行うために使用されるオブジェクトです。サーバーと対話し、クライアントとサーバー間でデータを交換するのに役立ちます。ページ全体を更新しなくても、サーバーからデータをプルできます。これにより、ユーザーはページの一部のみを中断して作業を続けることができます。このメソッドを使用すると、フォームを使用せずに POST データを送信できます。

const URL = 'delftstack.com'
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'DelftStack'}));

JavaScript で Fetch API を使用してフォームなしで POST データを送信する

XHR のような JavaScriptFetch API は、HTTP リクエストをサーバーに送信するのに役立ちます。しかし、XHR は約束を利用せず、雑然とした汚れたコードにつながりました。Fetch API を使用するには、fetch() メソッドを呼び出す必要があります。次のパラメータを受け入れます。

• URL：データをリクエストする API の URL。
• object：これは、行われた要求のタイプに関する追加のプロパティを指定するオブジェクトです。3 プロパティがあります：
  • method：GET、POST などのメソッドを指定します。この場合、POST リクエストを行っているため、その値は POST である必要があります。
  • body：body オブジェクトには、送信するデータが含まれています。
  • headers：これは、HTTP 要求および応答ヘッダーに対してさまざまなアクションを実行するのに役立つオプションのパラメーターです。

fetch() メソッドの後に、promise メソッド then() と catch() を指定します。fetch() によって返される promise が resolved の場合、then() で指定された関数が実行されます。それ以外の場合、promise は rejected され、catch() 内の関数が呼び出されます。

let data = {name: 'DelftStack'};
fetch('https://randomuser.me/api/?results=10', {
  method: 'POST',
  body: JSON.stringify(data)
}).then(res => {
  console.log('Promise resolved', res);
});

JavaScript で Navigator.sendBeacon() を使用してフォームなしで POST データを送信する

Navigator.sendBeacon() メソッドは、HTTP リクエストを介して非同期で Web サーバーにデータを送信するのに役立ちます。その主な用途は、ウェブサイト分析データをサーバーに送信することですが、POST データを送信するためにも使用できます。

let data = {name: 'DelftStack'};
navigator.sendBeacon('https://randomuser.me/api/?results=10', data);