のXMLを使用してJSON APIを呼び出す

5423 ワード
webdev ajax api javascript テキストリンク
この記事では、Ajax XMLHttpRequestで最も簡単な方法に取り組みます.これは、JSON APIデータを呼び出すことにより、単一のポストとポスト全体を取得することができます.また、いくつかのHTML、CSS、JavaScriptを最初に使用して、何を構築してください.

要件
  • HTML
  • CSS
  • JavaScript ( DOM , AJAX , API )
    • では、プロジェクトに飛び込みましょう

    HTML
    <body>
 <button id="btn">Get Data</button>
  <p id="p"></p>
</body>
    HTMLのセクションでは、我々はボタンを作成し、下に我々は'ボタン'をクリックしたときにデータを表示する' p 'テキストを置く.
    まず、ウィンドウバーの設定

    CSS
    *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: lightblue;
}
    CSSでボタンとUIキットをデザインしましょう.
    button{
  padding: 10px 30px;
  text-transform: capitalize;
  background: #222;
  color: #eee;
  outline: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  margin: 20px 10px;
}
button:active{
  transform: scale(0.97);
}
    ボタンを使用する準備ができました.ボタンがクリックされると、' p 'テキストがJSONデータを表示します.' ul li 'として変換されます.
    ul {
  background: firebrick;
  padding: 20px;
  margin: 0 10px
}
ul li{
  color: lightblue;
}
    プレビュー
    クリックなしで

    ボタンをクリックした後


    ジャバスクリプト
    console.clear();
// external json data from codepen 'https://codepen.io/nakome/pen/DnEvr'
// fake api data 'https://jsonplaceholder.typicode.com/posts/'
const btn = document.getElementById('btn');
const p = document.getElementById('p');
    まず、コンソールをクリアします.その後、そのIDでボタンとPの要素をキャッチします.
    btn.addEventListener('click', getData);
    イベント・リスナーを「BTN」に追加し、関数名' getData 'を作成します
    function getData (){
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
  // xhr.open('GET', 'https://codepen.io/nakome/pen/DnEvr.js', true);
  xhr.onload = function(){
    if(this.status == 200){
      const data = JSON.parse(this.responseText)
   p.innerHTML = `
   <ul>
   <li>ID: ${data.id}</li>
   <li>Title: ${data.title}</li>
   <li>Body: ${data.body}</li>
   </ul>
   `
    }
  }
  xhr.onerror = function(){
    const error = `404: Not Found`
    console.log(error);
    p.innerHTML = error;
  }
  xhr.send();

}
    XmlHttpRequestを変数名' xhr 'に設定します.' open '関数は3つのパラメータ' method ', ' url/filename ', ' true/false 'を取ります.
    const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
    次に、このリクエストを下のsend ()関数で送信しなければなりません.
    xhr.send();
    さて、APIデータを取得するには、イベント名' onload 'を使用しなければなりません.ここでは、状態が200に等しいならば、条件を作ります、そして、データは受け取られます.ResponseTextメソッドでデータを受け取ります.サーバーデータを使用するとき、JSONで変換します.パースメソッド.そして、この値を新しい変数名' data 'に入れます.
     xhr.onload = function(){
    if(this.status == 200){
      const data = JSON.parse(this.responseText)
    ここでは、私はきれいなコードのためにテンプレートリテラルを使用しました.' data 'はドット表記法でid , title , body nameと呼ばれます.
    p.innerHTML = `
   <ul>
   <li>ID: ${data.id}</li>
   <li>Title: ${data.title}</li>
   <li>Body: ${data.body}</li>
   </ul>
   `
    最後にエラーがあればエラー関数を作成します.
    xhr.onerror = function(){
    const error = `404: Not Found`
    console.log(error);
    p.innerHTML = error;

    ノート
    ここでは、JSON APIの2種類を入れました.私は偽のAPIで働いた.これらの両方を扱うことができます.
    // external json data from CodePen - 'https://codepen.io/nakome/pen/DnEvr'
// fake api data - 'https://jsonplaceholder.typicode.com/posts/'

    コディン
    The entire project is in CodePen

    ラッピング
    もしあなたがプレスを忘れないように❤️ と購読.また、後で使用するためにそれをブックマークできます.それは、このプロジェクトを作るのは楽しいし、任意のクエリや提案があればそれらをドロップすることを躊躇しないでください.またね.
    あなたはgithubプロファイルに私に星を与えることによってあなたのサポートを拡張することができます.😊👇
    Github
    Portfolio
    白俊10828号です.
    Andriod死亡通知メカニズムを利用してサービスにクライアントがkillされたと伝えた.