如何在Laravel Blade文件中通过脚本修改变量值并更新展示内容

首先明确：Blade模板里的PHP变量是服务端渲染的，页面加载到浏览器后，PHP已经执行完毕并生成静态HTML，JavaScript无法直接修改这些服务端变量。你需要通过JS动态操作DOM，把AJAX获取的数据渲染到页面上。

步骤1：修改Blade模板，预留动态渲染容器 #

把原来静态的计数展示部分替换成一个容器（可保留初始默认内容），方便JS后续填充数据：

<div id="children-count-container">
  counting....
  @for($i=1;$i<=3;$i++)
    <br/>{{$i}}
  @endfor
  <br>The user have a total of 3 children.
</div>

步骤2：完善AJAX请求与动态渲染逻辑 #

补充id的获取方式（从按钮的data-id属性提取），并在AJAX成功回调里用JS生成对应的计数内容：

<script>
  $(document).ready(function (){
    $(document).on('click','.showBtn', function(){
      // 从按钮的data-id属性获取用户ID
      const userId = $(this).data('id');
      showModal();

      $.ajax({
        type: 'GET',
        url: '/get_data/' + userId,
        success: function(response){
          const childCount = response.count.number_of_children;
          const container = $('#children-count-container');

          // 清空容器原有内容
          container.empty();

          // 动态生成计数内容
          container.append('counting....<br>');
          for(let i = 1; i <= childCount; i++){
            container.append(`${i}<br>`);
          }
          container.append(`<br>The user have a total of ${childCount} children.`);
        }
      })
    });
  });
</script>

步骤3：修正控制器细节 #

遵循Laravel模型命名规范（模型类首字母大写），确保返回的数据包含number_of_children字段：

public function get_data($id){
    // 模型类首字母大写，符合Laravel规范
    $data = User::find($id);
    return response()->json([
        'count' => $data
    ]);
}

补充：按钮需添加data-id属性 #

触发模态框的按钮要带上用户ID，方便JS获取：

<button class="showBtn" data-id="{{ $user->id }}">查看子项计数</button>

这样点击按钮后，AJAX获取到用户的子项数量，JS就会动态生成对应的计数列表和文本，替换掉容器里的内容，实现你要的效果。

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