Javascript, Jquery, json, ajax

2383 ワード
テキストリンク

Javascript


画面上でHTMLを操作します.

JQuery


JavaScriptライブラリ、IMPORTを使用
プロフェッショナル開発者が作成したコードをインポートして使用
jQuery CDN: https://www.w3schools.com/jquery/jquery_get_started.asp 
<head> </head> 사이 아래 줄을 추가 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
$('#id').関数()フォーマットの使用
必要な関数は、ex)jquery画像srcの変更、jquery span値のインポートなどを検索して使用できます.

JSON


Key:Value値に設定
ex)https://api.thecatapi.com/v1/images/searchに接続すると、以下のような構造のJSON形式のapiが見られます.
[
  {
    "breeds": [ ],
    "id": "a54",
    "url": "https://cdn2.thecatapi.com/images/a54.jpg",
    "width": 600,
    "height": 450
  }
]

AJAX


APIサーバから資料を要求してJSON情報を検索する.
*ajaxを使用するには、jqueryをインポートする必要があります.
$.ajax({
         type: "GET",
         url: "https://api.thecatapi.com/v1/images/search",
         data: {},
         success: function(response) {
         let imgurl = response[0]['url'];
         }
     })
猫api json値を応答に挿入し、配列構造を使用して必要な値を読み出します.

結果



青色フォントのドル部分に為替レートapiを用い,リフレッシュごとにリアルタイムで値を変更した.
ロボットフレームワーク
CloudKitを使ってみた Swift版