BMI计算器无法在不刷新页面时从控制器获取数据到视图

问题分析 #

你的核心问题是点击计算按钮后结果仅短暂显示就刷新页面，根源在于三个点：

1. 视图中结果判断逻辑错误，导致有效结果可能无法正常显示
2. JavaScript事件绑定逻辑混乱，无法正确阻止表单默认提交行为
3. 同步提交与前端阻止刷新的逻辑冲突，导致页面行为不符合预期

解决方案 #

方案一：修复同步提交流程（无需AJAX） #

保持后端处理逻辑不变，仅调整视图和前端代码，让页面刷新后稳定显示结果：

1. 修正视图的结果判断
   把原视图中的isset($res[0])改为直接判断isset($res)，确保有效字符串结果能正常显示：

   <div class="try">
       <?php
           if(isset($res)){
               echo "Your BMI result is: " . $res;
           }
       ?>
   </div>
   

2. 规范表单代码
   使用CodeIgniter的form_open辅助函数生成正确的表单，确保提交地址指向处理方法，移除多余的JS代码：

   <?php echo form_open('cal/calculator'); ?>
       <input type="number" name="height" placeholder="身高（米，如1.75）" required>
       <input type="number" name="weight" placeholder="体重（千克）" required>
       <button type="submit" class="btn-check">计算</button>
   <?php echo form_close(); ?>
   

   提交后页面会刷新，后端处理完成后返回带结果的视图，即可稳定显示BMI结果。

方案二：AJAX异步提交（无页面刷新） #

如果想要页面不刷新直接显示结果，需要同时调整后端和前端逻辑：

1. 修改后端calculator方法
   改为返回JSON格式结果，同时修复BMI判断的逻辑漏洞（原逻辑中>30.0的条件会覆盖>31.0的判断）：

   public function calculator(){
       $height = $this->request->getPost('height');
       $weight = $this->request->getPost('weight');
       
       // 基础输入验证，避免计算错误
       if($height <=0 || $weight <=0){
           return $this->response->setJSON(['res' => '身高体重必须大于0']);
       }
       
       $bmicalc = $weight/($height*$height);
       $result;
       
       if($bmicalc <= 18.5){
           $result = "Underweight";
       }elseif($bmicalc > 18.5 && $bmicalc<=24.9){
           $result = "Normal weight";
       }elseif($bmicalc > 24.9 && $bmicalc<=29.9){
           $result = "Overweight";
       }elseif($bmicalc > 30.0 && $bmicalc <=31.0){
           $result = "OBESE";
       }elseif($bmicalc > 31.0){
           $result = "OBESE 2";
       }
   
       // 插入数据库逻辑保留
       $bmi = new BMI();
       $bmiInsert = [
           'weight' => $weight,
           'height' => $height,
           'res' => $result,
       ];
       $bmi->insert($bmiInsert);
       
       // 返回JSON格式结果
       return $this->response->setJSON(['res' => $result]);
   }
   

2. 修改前端视图与JS
   隐藏结果容器，通过AJAX提交数据并动态显示结果：

   <div class="try" style="display:none;">
       <!-- 结果将通过JS动态插入 -->
   </div>
   
   <?php echo form_open('cal/calculator', ['id' => 'bmi-form']); ?>
       <input type="number" name="height" placeholder="身高（米，如1.75）" required>
       <input type="number" name="weight" placeholder="体重（千克）" required>
       <button type="button" class="btn-check">计算</button>
   <?php echo form_close(); ?>
   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
       $(document).ready(function(){
           $('.btn-check').click(function(){
               var formData = $('#bmi-form').serialize();
               $.ajax({
                   url: $('#bmi-form').attr('action'),
                   type: 'POST',
                   data: formData,
                   dataType: 'json',
                   success: function(response){
                       $('.try').html("Your BMI result is: " + response.res).show();
                   },
                   error: function(){
                       $('.try').html("计算出错，请检查输入").show();
                   }
               });
           });
       });
   </script>
   

额外提示 #

• 建议在前端或后端添加单位提示，确保用户输入的身高是米（而非厘米），避免计算结果错误
• 可以在后端补充更多输入验证规则，比如限制身高体重的合理范围

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