如何将JavaScript变量通过请求参数传递给Spring MVC控制器并返回新视图

可以实现，你之前的方案无法加载新视图是因为Ajax异步请求默认不会自动触发页面跳转/渲染，和传值是否成功无关，Thymeleaf可以配合实现该需求，以下是具体实现方案：

问题根因 #

Ajax的设计初衷是在不刷新整个页面的前提下和后端交互数据，因此即使控制器返回了完整的视图HTML代码，Ajax也只会把它当作普通字符串返回给前端回调函数，不会主动把这段HTML替换成当前页面的内容，所以你看不到新视图加载。

实现方案 #

方案1：直接触发页面跳转（最推荐） #

不需要使用Ajax，直接通过前端JS主动触发页面跳转/表单提交，由浏览器自动加载后端返回的新视图，完全兼容Thymeleaf的服务端渲染逻辑。

• GET请求传参示例：
  直接在JS中将变量拼接为URL参数，调用window.location.href跳转即可：

  const goodsId = 1001;
  // 跳转至控制器端点，传递goodsId参数
  window.location.href = '/goods/detail?goodsId=' + goodsId;
  

  控制器接收参数后返回视图，Thymeleaf正常渲染：

  @GetMapping("/goods/detail")
  public String getGoodsDetail(@RequestParam Integer goodsId, Model model) {
      // 查询商品数据
      Goods goods = goodsService.getById(goodsId);
      model.addAttribute("goods", goods);
      // 返回Thymeleaf视图名称
      return "goods-detail";
  }
  

• POST请求传参示例：
  如果参数较多或者需要使用POST提交，可以通过JS动态创建隐藏表单提交：

  // 封装提交方法
  function submitForm(action, params) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = action;
    // 遍历参数生成隐藏输入框
    Object.keys(params).forEach(key => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = params[key];
      form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
  }
  // 调用示例
  submitForm('/order/create', {
    goodsId: 1001,
    count: 2,
    addressId: 5
  });
  

  控制器直接用对象或者@RequestParam接收参数即可，不需要加@RequestBody注解，返回视图逻辑和GET请求一致。

方案2：Ajax请求后手动渲染视图（不推荐） #

如果必须使用Ajax发送请求，可以在请求成功的回调中，将后端返回的视图HTML手动替换当前页面的内容：

$.ajax({
  url: '/goods/detail',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({goodsId: 1001}),
  success: function (html) {
    // 直接替换整个页面的DOM内容
    document.documentElement.innerHTML = html;
  }
});

该方案需要注意页面原有JS、CSS的作用域问题，容易出现交互或样式异常，非必要不使用。

Thymeleaf的作用说明 #

Thymeleaf是服务端模板引擎，仅负责在服务端将控制器存入Model的变量渲染到视图模板中，生成最终的HTML代码返回给前端。只要你能正确把JS变量传递到控制器端点，就能正常通过Thymeleaf渲染新视图，不需要额外的适配逻辑。

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