如何将JS变量传递至Spring控制器？HTML场景下的实现疑问

嘿，我来帮你解决这个问题——把JS变量（包括你提到的HTML里的pdata）传到Spring控制器其实有好几种靠谱的方法，不一定非得用表单，咱们分场景来看：

这种方式不用刷新页面，适配绝大多数前端交互场景，不管你的pdata是简单字符串还是复杂对象，都能轻松传递。

示例代码 #

JS端（以现代浏览器支持的fetch为例，jQuery的AJAX写法也附在后面）

// 假设你的pdata变量已经定义完成
let pdata = {id: 101, content: "这是要传递的内容"};

// 用fetch发送POST请求
fetch('/submit-pdata', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 告诉后端接收的是JSON格式
  },
  body: JSON.stringify(pdata), // 将JS对象转为JSON字符串
})
.then(response => response.json())
.then(result => {
  console.log('传递成功：', result);
})
.catch(err => {
  console.error('传递出错：', err);
});

// 如果你项目里用了jQuery，也可以这么写：
// $.ajax({
//   url: '/submit-pdata',
//   type: 'POST',
//   contentType: 'application/json',
//   data: JSON.stringify(pdata),
//   success: function(res) { console.log(res); },
//   error: function(xhr) { console.log(xhr.responseText); }
// });

Spring控制器端

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

    // 用@RequestBody接收JSON格式的参数
    @PostMapping("/submit-pdata")
    public String receivePdata(@RequestBody PdataDTO pdata) {
        // 这里直接使用pdata对象的属性即可
        System.out.println("接收的ID：" + pdata.getId());
        System.out.println("接收的内容：" + pdata.getContent());
        return "传递成功";
    }

    // 定义和JS变量结构对应的DTO类，记得加getter/setter
    static class PdataDTO {
        private Integer id;
        private String content;

        public Integer getId() { return id; }
        public void setId(Integer id) { this.id = id; }
        public String getContent() { return content; }
        public void setContent(String content) { this.content = content; }
    }
}

如果你的pdata是简单类型（比如单个字符串/数字），也可以不用DTO类，直接用@RequestBody String pdata接收。

如果你的需求是提交数据后跳转页面，那可以用表单+隐藏域的方式：先把JS变量pdata赋值给表单的隐藏输入框，再提交表单。

示例代码 #

HTML+JS端

<form id="pdataForm" action="/submit-via-form" method="post">
  <!-- 隐藏域用来存储pdata变量 -->
  <input type="hidden" id="pdataInput" name="pdata" value="">
  <button type="submit">提交数据</button>
</form>

<script>
let pdata = "这是要通过表单传递的内容";
// 将pdata赋值给隐藏域
document.getElementById('pdataInput').value = pdata;

// 也可以通过JS主动触发表单提交，不用点击按钮
// document.getElementById('pdataForm').submit();
</script>

Spring控制器端

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.Controller;

@Controller
public class FormController {

    @PostMapping("/submit-via-form")
    public String receiveFormData(@RequestParam("pdata") String pdata) {
        System.out.println("通过表单接收的内容：" + pdata);
        // 跳转至结果页面，返回视图名称即可
        return "result-page";
    }
}

如果pdata是复杂对象，你可以把它转为JSON字符串存在隐藏域，后端接收后再解析为对象；或者拆分对象属性为多个表单字段传递。

如果你的pdata是简单数据，且允许暴露在URL中，可以用GET请求把参数拼在URL后面传递。

示例代码 #

JS端

let pdata = "简单测试数据";
// 跳转到控制器对应的页面，或者用AJAX发送GET请求
window.location.href = "/submit-via-url?pdata=" + encodeURIComponent(pdata);

Spring控制器端

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.Controller;

@Controller
public class UrlParamController {

    @GetMapping("/submit-via-url")
    public String receiveUrlParam(@RequestParam("pdata") String pdata) {
        System.out.println("通过URL参数接收的内容：" + pdata);
        return "result-page";
    }
}

⚠️ 注意：GET请求的参数会暴露在URL里，不适合传递敏感数据，且数据长度有一定限制。

总结 #

• 不需要刷新页面的交互场景，优先选AJAX，灵活度最高；
• 需要提交后跳转页面的场景，用表单+隐藏域；
• 简单、非敏感数据，且允许暴露在URL中，用URL参数传递。

所以完全不是必须用表单，根据你的实际需求选最合适的方法就好～

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