ネイティブ JavaScript を使用して Ajax リクエスト データを送信する手順

注: リクエストアドレスはあなた自身のプロジェクトアドレスです。ご自身で変更してください。

これはネイティブ XMLHttpRequst の単純な使用法です。後で、ネイティブ Ajax をカプセル化して jequery の ajax を実装する方法を投稿します

ステップ 1: xhr オブジェクトを作成します。

const xhr = new XMLHttpRequest();

ステップ 2: open() 設定。

xhr.open('PUT','http://118.24.84.199:8080/sm/accept/list',false);

ステップ 3: インターフェースに必要なヘッダーを設定します。

xhr.setRequestHeader('token','515b8c62-ddf4-41ef-a7c8-93957e1c589e');
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');

ステップ 4: リクエスト データを送信します。

注: ここのデータは json ファイルとして処理され、JSON.stringify を使用して処理される必要があります。

let data = {
                page:1,
                pageSize:10,
            };
data = JSON.stringify(data);
xhr.send(data);

ここに送信されており、ブラウザのネットワークリクエストでリクエストステータスを確認できます。

しかし、データはまだページ内で処理されていません

データが同期リクエストの場合: send() ステートメントの直後にデータを処理します。

console.log(xhr.response);

しかし、一般に、データリクエストは非同期であるため、データを処理するには onreadystatechange イベントを使用する必要があります。
データを受け取ったら印刷してください。

xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(JSON.parse(xhr.response));
        } else {
            console.log("Request was unsuccessful: " + xhr.status);
        }
    }
};

関連記事:

ネイティブ JS を使用して Ajax GET POST リクエストを実装する方法

ネイティブ JavaScript を使用して AJAX リクエストを処理する方法を説明する例

関連動画:

Ajax 原則の詳細ビデオチュートリアル

以上がネイティブ JavaScript を使用して Ajax リクエスト データを送信する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。