コードチャレンジ10 210709

19367 ワード
スパルタコードクラブ 開発/学習ログ テキストリンク
学習内容

-Ajax練習を適用


QUIZ 2:ボタンを押すたびにランダム猫の写真を出力


(1)Ajaxスケルトン、オープンAPIアドレスの取得
<script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                }
            })
        }
    </script>
(2)画面に画像を撮るので、コードを書くときに画像が表示されているか確認しましょう!
{
breeds: [ ],
id: "MTc4Mjk2Ng",
url: "https://cdn2.thecatapi.com/images/MTc4Mjk2Ng.jpg" ,
width: 500,
height: 667
}
  • はすべて応答であり、0番目(最初)の項目のurl値は画像である.この値をimgurl変数として宣言します.
    • <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                let imgurl = response[0]['url']
                }
            })
        }
    </script>
    (3)画像ラベルscrを置換するためのjQueryの検索
    img id="img_form_url"
    以上のimgのsrcを変更するには、次の手順に従います.
  • $("#img_form_url").attr("src", imgurl);
    • (出典:https://it77.tistory.com/358[涼しい冷麺の人の生活物語])
  • 私のコードでは、img idの値はimg-catです.
    srcはhttps://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
    変更する画像値はimgurlとして定義されます.
    最終コード:
    • <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                let imgurl = response[0]['url']
                $("#img-cat").attr("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", imgurl);
                }
            })
        }
    </script>

    HOMEWORK :


    作成したページに為替レート情報を挿入します。ページがロードされると実行されることを確認します。

    <script>
$(document).ready(function () {
            q1();
        });
</script>
    :ページがロードされるとq 1という関数を実行するコード
    (1)Ajaxスケルトン、APIアドレスの取得
    <script>
function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                }
            })
        }
</script>
    (2)
    {
    日付:「2021年07月15日」,
    rate: 1143.11
    }
    レート値を指定します.したがって、応答のレート値はrateとして宣言される.
    <script>
function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                let rate = response['rate']
                }
            })
        }
</script>
    (3)body部分の為替レート情報を任意の数字に入れidを設定し,タグ中のテキスト値をq 1に設定する.
    「$('#btn-posting-box').text(位置決めボックスを閉じる)」
    関数置換の使用
    <script>
function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                let rate = response['rate']
                $('#rate').text(rate)
                }
            })
        }
</script>
    (4)ページはロード直後に実行する必要があるため、最終コード
    <script>
$(document).ready(function () {
            q1();
        });


function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                let rate = response['rate']
                $('#rate').text(rate)
                }
            })
        }
</script>

  • 実際のページ


  • 繰り返し慣れましょう.

  • 長い時間をかけても、一人で問題を解決した経験を積まなければならない.

  • ほかの人がやっても私にはできる.しかし、私は他の人より20倍、30倍少ない時間を費やしています.

  • 遅くてもがんばれ!!
    • [0614]Java Web開発プロセス🌞
    AndroidデータストアのContentProvider