プレゼンテーションシナリオ: スライド140

スライド140では、jQuery AJAX call APIの例について説明します。

説明:

$.ajax({...}) → APIを呼び出すためのjQuery関数。
url → APIエンドポイント（ここではpublic API jsonplaceholderを使用）。
method → HTTPメソッド（GET/POST/PUT/DELETE）。
success: function(data){...} → APIがデータを正常に返したときに実行されるコールバック。
error: function(){...} → APIがエラーの場合に実行されるコールバック。
返されたデータ（data）はHTMLに表示するために使用されます。

コード例:

$(document).ready(function(){
    // Bind click event to the button
    $("#btn").click(function(){
        // Call public API using jQuery AJAX
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/users/1",
            method: "GET",
            success: function(data){
                // Display user name and email
                $("#result").html("Name: " + data.name + "<br>Email: " + data.email);
            },
            error: function(){
                $("#result").html("Error while fetching data.");
            }
        });
    });
});

以上で、jQuery AJAXを使用してAPIを呼び出し、データを表示する方法の例についての説明を終わります。