スパルタエンコーディングクラブ[ウェブ開発]2週目(2)

1699 ワード
テキストリンク
  • Javascript構文を熟知しています.
  • jQueryで簡単なHTMLを操作できます.

    • 3.Ajaxを使用してサーバAPI（約定）にデータを送信し、結果を受信する。


    2週目最後のAjaxについてご紹介します.
    ※Ajaxは、jQueryのインポート時のみ使用できます.
    そうでなければ
    Uncaught TypeError: $.ajax is not a function
    →ajaxの意味がない
    Ajaxベーススケルトン
    $.ajax({
  type: "GET",
  url: "여기에URL을입력", //여기에 보통 API주소를 넣어서 사용한다
  data: {},
  success: function(response){
    console.log(response)
  }
})
    Ajaxコード説明
    $.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "API주소 / 데이터를 가지고올 주소",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
    GETリクエストは、urlの後ろに次のように貼り付けてデータを取得します.
    http://naver.com?param=value¶m2=value2
    POST要求は、データを入れることにより、data:{}でデータを取得する.
    data: { param: 'value', param2: 'value2' },

    このようにAjaxの基礎について学び、応用してみました。




    (urlアドレスはスパルタエンコーディングクラブから提供されたので、/ソウル市の天気データを削除しました)
    ソウル市の天気データからGET方式で「temp」(温度)値を取得し、id=「temp」値のspanラベルにテキスト値として入れる.
    そして.
     $(document).ready(function() {});
    ロードを使用すると、この値はリアルタイムのデータ値になります.

    字を書くとき気温が2度上がった
    スパルタエンコーディングクラブ[ウェブ開発]2週目(1)
    List connected users–similar to task manager