使用带有按钮的jquery将数据加载到下标

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<button id="loadDataBtn">加载数据</button>
<div id="dataContainer"></div>

$(document).ready(function() {
  $('#loadDataBtn').click(function() {
    $.ajax({
      url: 'your_data_url', // 替换为实际的数据请求URL
      method: 'GET', // 根据实际情况选择请求方法
      dataType: 'json', // 根据实际情况选择数据类型
      success: function(response) {
        var data = response.data; // 假设返回的数据是一个数组
        var container = $('#dataContainer');
        
        // 清空容器中的内容
        container.empty();
        
        // 遍历数据数组，将每个数据项添加到容器中
        $.each(data, function(index, item) {
          var newItem = $('<p>').text(item); // 创建一个新的p元素，并设置文本为数据项的值
          container.append(newItem); // 将新元素添加到容器中
        });
      },
      error: function() {
        console.log('数据加载失败');
      }
    });
  });
});