PHP传递文本框数据至Bootstrap模态框失败：模态框不显示无数据

我来帮你搞定这个问题，你的代码里有几个关键问题导致模态框无法正常显示、数据传递失败，咱们一步步修正：

核心问题分析 #

1. 输入框值获取错误：你用document.getElementById("weights")拿到的是DOM元素对象，不是用户输入的实际值，必须通过.value属性获取内容。
2. AJAX数据传递格式不规范：直接拼接字符串传递参数容易出现编码或语法问题，建议用对象格式传递，jQuery会自动处理参数编码。
3. 依赖检查：确保你已经正确引入了jQuery和Bootstrap的JS文件，这是Bootstrap模态框正常工作的前提。

修正后的完整代码 #

HTML部分（文本框+按钮+模态框） #

<!-- 输入框 -->
<input type="text" id="weights" class="form-control" placeholder="Weight (lbs)" name="weight">

<!-- 提交按钮 -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModalCenter" id="buttonx">Submit</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Results</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="fetched-data">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

修正后的jQuery代码 #

$(document).ready(function() {
  // 监听模态框显示前的事件
  $('#exampleModalCenter').on('show.bs.modal', function(e) {
    // 获取输入框的实际值
    var weight = document.getElementById("weights").value;
    
    // 发起AJAX请求
    $.ajax({
      type: 'post',
      url: 'showResult.php',
      // 用对象格式传递参数，更规范
      data: { weight: weight },
      success: function(data) {
        // 将返回的数据插入模态框
        $('#fetched-data').html(data);
      },
      // 增加错误处理，方便排查问题
      error: function(xhr, status, error) {
        console.log("AJAX请求错误：" + error);
        $('#fetched-data').html("加载数据失败，请重试");
      }
    });
  });
});

PHP代码（showResult.php） #

<?php
// 先检查参数是否存在，避免报错
if(isset($_POST["weight"])){
  $data = $_POST["weight"];
  echo "The weight is $data";
} else {
  echo "未获取到重量数据";
}
?>

测试注意事项 #

1. 确保页面头部已经正确引入依赖：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

2. 检查showResult.php是否和当前HTML文件在同一目录下，或者调整AJAX的url路径。
3. 打开浏览器控制台（F12），如果还有问题可以查看控制台的错误信息，方便进一步排查。

内容的提问来源于stack exchange，提问作者Arman Masangkay