如何通过点击链接而非按钮打开带POST请求的MySQL数据弹窗？

当然可行！完全可以把触发弹窗的按钮改成链接——AJAX的POST请求和触发它的元素类型没有绑定关系，不管是按钮、链接还是其他交互元素，只要能绑定点击事件并执行对应的AJAX逻辑就没问题。下面是具体的修改步骤和优化建议：

1. 替换HTML元素（按钮改链接） #

把原来的<input>按钮替换成<a>标签，保留核心的view_data类和id属性（用来传递员工ID），同时可以根据需求调整样式：

<!-- 替换原按钮为链接 -->
<a href="#" class="view_data" id="<?php echo $row["id"]; ?>">View</a>

<!-- 弹窗结构保持不变 -->
<div id="dataModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Employee Details</h4>
      </div>
      <div class="modal-body" id="employee_detail"> </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2. 调整JavaScript逻辑（阻止链接默认跳转） #

<a>标签默认点击会触发页面跳转（href="#"会跳到页面顶部），所以需要在点击事件里阻止默认行为，其余AJAX请求逻辑完全保留即可：

<script>
$(document).on('click', '.view_data', function(e){
  // 阻止链接的默认跳转行为，避免页面滚动或跳转
  e.preventDefault();
  
  var employee_id = $(this).attr("id");
  if(employee_id != '') {
    $.ajax({
      url:"select.php",
      method:"POST",
      data:{employee_id:employee_id},
      success:function(data){
        $('#employee_detail').html(data);
        $('#dataModal').modal('show');
      }
    });
  }
});
</script>

额外优化小技巧 #

• 要是不想写e.preventDefault()，可以把链接的href直接设为javascript:void(0);，同样能避免默认跳转
• 给链接加个CSS样式cursor: pointer;，让鼠标 hover 时显示手型，更符合链接的交互预期

内容的提问来源于stack exchange，提问作者John Stu