ajax响应数据未显示在Jquery中的modal内的html表中

<!-- HTML结构 -->
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">数据展示</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <table id="data-table" class="table">
          <thead>
            <tr>
              <th>列1</th>
              <th>列2</th>
              <th>列3</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 点击按钮触发ajax请求
  $('#btn-ajax').click(function() {
    $.ajax({
      url: 'your-api-url',
      type: 'GET',
      dataType: 'json',
      success: function(response) {
        // 清空表格内容
        $('#data-table tbody').empty();
        
        // 解析并生成表格内容
        $.each(response, function(index, data) {
          var row = $('<tr>');
          row.append($('<td>').text(data.column1));
          row.append($('<td>').text(data.column2));
          row.append($('<td>').text(data.column3));
          $('#data-table tbody').append(row);
        });
        
        // 显示modal弹窗
        $('#myModal').modal('show');
      },
      error: function(xhr, status, error) {
        console.log(error);
      }
    });
  });
});
</script>