ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ JavaScript を使用して Ajax リクエスト データを送信する手順

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

php是最好的语言
リリース: 2018-08-03 14:14:40
オリジナル
3631 人が閲覧しました

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

これはネイティブ 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);
ログイン後にコピー

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

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

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

データが同期リクエストの場合: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート