Ajax成功後にdivを更新する方法

jQueryのload()メソッドを使用する方法:

$(document).ready(function(){
    $('#refreshButton').click(function(){
        $('#resultDiv').load('data.php', function(){
            alert('データの読み込みが完了しました。');
        });
    });
});

上記の例では、#refreshButtonというidを持つボタンがクリックされたときに、#resultDivというidを持つdivをdata.phpから取得したデータで更新します。データの読み込みが完了した後に、アラートメッセージが表示されます。

jQueryのajax()メソッドを使用する方法:

$(document).ready(function(){
    $('#refreshButton').click(function(){
        $.ajax({
            url: 'data.php',
            type: 'GET',
            success: function(data){
                $('#resultDiv').html(data);
                alert('データの読み込みが完了しました。');
            }
        });
    });
});

上記の例では、#refreshButtonというidを持つボタンがクリックされたときに、data.phpからデータを非同期で取得し、#resultDivというidを持つdivの内容を取得したデータで更新します。データの読み込みが完了した後に、アラートメッセージが表示されます。

JavaScriptのfetch()を使用する方法:

document.getElementById('refreshButton').addEventListener('click', function(){
    fetch('data.php')
        .then(response => response.text())
        .then(data => {
            document.getElementById('resultDiv').innerHTML = data;
            alert('データの読み込みが完了しました。');
        });
});

上記の例では、refreshButtonというidを持つボタンがクリックされたときに、data.phpからデータを非同期で取得し、resultDivというidを持つdivの内容を取得したデータで更新します。データの読み込みが完了した後に、アラートメッセージが表示されます。

これらはいくつかの一般的な方法ですが、実際の使用方法は特定の要件や環境によって異なる場合があります。適切なメソッドを選択し、必要に応じてコードをカスタマイズしてください。