如何在服务端接收表单参数？React+Axios请求取值疑问

我有一个React JS应用，用axios库通过表单提交向服务端发送POST请求，客户端代码如下：

sendData(data,price) { 
  axios.post('http://localhost:8080/SampleJavaAPP/UserServer', { 
    item: data,//these value 
    price:price//these value 
  }) 
  .then(function (response) { 
    console.log(response); 
  }) 
  .catch(function (error) { 
    console.log(error); 
  }); 
}

我尝试用String name = request.getParameter("item")这种方式在服务端取值，但拿不到数据，不确定正确的获取方式是什么？

你踩的坑其实很常见——axios默认发送的是JSON格式的请求体，而不是传统的表单编码数据，request.getParameter()只能解析表单编码的参数，自然拿不到JSON里的值。下面分两种主流场景给你具体解决方案：

1. 用Spring框架（最常用的Java后端方案） #

直接借助Spring的注解就能自动解析JSON，不用手动处理请求体：

方式一：定义实体类接收参数 #

先创建一个和前端参数结构对应的Java类：

public class ItemRequest {
    private String item;
    private String price; // 要是价格是数字类型，换成Double/Integer就行

    // 必须要有无参构造器，Spring解析时需要
    public ItemRequest() {}

    // Getter和Setter方法不能少
    public String getItem() { return item; }
    public void setItem(String item) { this.item = item; }
    public String getPrice() { return price; }
    public void setPrice(String price) { this.price = price; }
}

然后在Controller里用@RequestBody注解接收：

@PostMapping("/SampleJavaAPP/UserServer")
public ResponseEntity<String> handleItemRequest(@RequestBody ItemRequest request) {
    String item = request.getItem();
    String price = request.getPrice();
    // 这里写你的业务逻辑
    return ResponseEntity.ok("收到参数：" + item + "，价格：" + price);
}

方式二：用Map直接接收（不想建实体类时用） #

如果只是临时用或者参数结构简单，直接用Map接收更省事：

@PostMapping("/SampleJavaAPP/UserServer")
public ResponseEntity<String> handleItemRequest(@RequestBody Map<String, Object> requestBody) {
    String item = (String) requestBody.get("item");
    String price = (String) requestBody.get("price");
    // 业务处理逻辑
    return ResponseEntity.ok("请求处理完成");
}

2. 用原生Servlet（没用到Spring等框架） #

这种情况需要手动读取请求体，再用JSON解析库（比如Jackson）解析：

首先确保你引入了Jackson的依赖（以Maven为例）：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version> <!-- 用最新稳定版即可 -->
</dependency>

然后在Servlet的doPost方法里这样处理：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 第一步：读取请求体里的JSON字符串
    BufferedReader reader = request.getReader();
    StringBuilder sb = new StringBuilder();
    String line;
    while ((line = reader.readLine()) != null) {
        sb.append(line);
    }
    String jsonBody = sb.toString();

    // 第二步：解析JSON
    ObjectMapper objectMapper = new ObjectMapper();
    // 方式一：用实体类（和上面的ItemRequest一样）
    ItemRequest requestData = objectMapper.readValue(jsonBody, ItemRequest.class);
    String item = requestData.getItem();
    String price = requestData.getPrice();

    // 方式二：用Map解析
    // Map<String, Object> requestMap = objectMapper.readValue(jsonBody, Map.class);
    // String item = (String) requestMap.get("item");

    // 第三步：处理业务并返回响应
    response.setContentType("application/json");
    response.getWriter().write("{\"status\":\"success\"}");
}

额外选项：让request.getParameter()生效（不推荐，除非有特殊需求） #

如果你非要用request.getParameter()，可以修改axios的请求，让它发送表单编码的数据：

sendData(data,price) { 
  // 把参数转成表单编码格式
  const params = new URLSearchParams();
  params.append('item', data);
  params.append('price', price);

  axios.post('http://localhost:8080/SampleJavaAPP/UserServer', params, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }) 
  .then(function (response) { 
    console.log(response); 
  }) 
  .catch(function (error) { 
    console.log(error); 
  }); 
}

不过这种方式更适合传统表单提交，现在前后端交互主流是JSON格式，更推荐前面的JSON解析方案。

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