Bootstrap模态框内嵌进度条展示后端百分比，jQuery代码失效问题求助

问题1：脚本引入顺序错误+重复引入冲突 #

你当前的脚本引入顺序不符合依赖规则，且重复加载了两个版本的jQuery，是document.ready不触发的核心原因：

• Bootstrap和popper都依赖jQuery，必须先引入jQuery，再引入popper，最后引入Bootstrap
• 你同时引入了完整版jQuery和slim版jQuery，slim版不包含$.ajax方法，会直接导致请求功能失效，还会造成全局$变量冲突

修正后的脚本引入顺序如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- 仅保留一个完整版jQuery，放在最前 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 再引入popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- 最后引入Bootstrap，仅保留一个版本即可 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

问题2：后端Servlet代码逻辑错误 #

你的Servlet代码存在多个语法和逻辑问题，会导致前端无法正常解析响应：

1. 单次HTTP请求只能返回一次响应，你写的循环输出100次JSON会直接破坏响应格式
2. 你在JSON里存的键是progress，但前端取的是data.num，键名不匹配无法取到值
3. 变量名拼写错误：你创建的JSON对象是obj，最后输出写的是json.toString()，属于变量未定义错误

修正后的Servlet代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    // 实际业务可替换为真实的插入进度统计逻辑，这里保留随机数做测试
    Random random = new Random();
    int num = random.nextInt(101); // 取值范围包含0-100
    JSONObject obj = new JSONObject();
    obj.put("num", num); // 和前端取值的键名保持一致
    response.getWriter().write(obj.toString());
}

问题3：前端逻辑优化 #

1. 建议把定时器变量提升到initializeModal函数顶层，模态框隐藏时主动清理定时器，避免后台继续发送无效请求
2. 给ajax加错误回调，方便排查请求异常问题
3. 你初始化模态框时设置了show: false，需要在业务触发点（比如点击上传按钮的事件里）手动调用$('#myModal').modal('show')，才会弹出模态框触发后续的进度拉取逻辑

修正后的JS代码：

$(document).ready(function() {
  alert("entered");
  initializeModal();
});

function initializeModal() {
  let interval = null; // 定时器变量提升到顶层，方便全局清理
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false
  });

  $('#myModal').on('shown.bs.modal', function() {
    console.log("modalfunction");
    function fetchpercentage() {
      $.ajax({
        url: '/progress',
        type: "GET",
        dataType: "json",
        success: function(data) {
          console.log(data.num);
          $("#dynamic")
            .css("width", data.num + "%")
            .attr("aria-valuenow", data.num)
            .text(data.num + "% Complete");
          if (data.num >= 100) {
            clearInterval(interval);
            document.getElementById('complete').innerHTML = "Uploaded";
          }
        },
        error: function(xhr, err) {
          console.log("请求异常：", err);
        }
      });
    }
    interval = setInterval(fetchpercentage, 3000);
  });

  $('#myModal').on('hidden.bs.modal', function() {
    // 隐藏模态框时清理定时器
    if(interval) clearInterval(interval);
    // reset modal
    if ($('#myModal').data('reenable')) {
      $(this).removeData();
      $('#myModal').modal({
        show: true
      });
    }
  });
}

内容的提问来源于stack exchange，提问作者Tripti Paliwal