Form表单提交后端获取不到值

form表单提交

<form action="updateEmployee" method="get">
	姓名:<input type="text" name="name" value="小乔"><hr>
    年龄:<input type="text" id="age" value="13"><hr>
    <input type="submit" value="提交">
</form>

后端接收

@WebServlet("/UpdateEmployee")
public class UpdateEmployee extends HttpServlet 

    public UpdateEmployee() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		String age = request.getParameter("age");
        System.out.println("name = " + name);
        System.out.println("age = " + age);
	}
}

输出结果

输出结果
此时后端能够正常获取姓名name的值,而无法获取age的值,与request.getParameter(key)对应的key是 中name = “key”,而不是id=“key”,id是用来前段JavaScript来进行操作的唯一标识,虽然很简单,但是我想写一下,记一下。

### 如何使用 Axios 正确提交 Form 表单数据后端 当使用 `axios` 提交表单数据时,默认情况下会将数据序列化为 JSON 格式的字符串[^1]。然而,在某些场景下,特别是处理文件上传或多部分表单 (`multipart/form-data`) 时,可能需要调整请求的内容类型。 #### 方法一:设置 Content-Type 为 application/x-www-form-urlencoded 对于简单的键对形式的数据传输,可以手动转换对象并指定合适的 MIME 类型: ```javascript onSubmit() { const params = new URLSearchParams(this.form); this.$axios({ method: 'post', url: '/form/test', data: params, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }); } ``` 这种方法适用于大多数标准的 HTML 表单字段,并能确保兼容性良好[^2]。 #### 方法二:构建 FormData 对象用于复杂表单结构 如果涉及到文件或其他类型的附件,则应采用 `FormData` API 来组装待发送的信息包: ```javascript onSubmit() { let formData = new FormData(); Object.keys(this.form).forEach(key => formData.append(key, this.form[key])); this.$axios.post('/form/test', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); } ``` 此方式不仅支持常规文本输入框,还允许附加文件资源作为一部分整体提交给服务器[^4]。 #### 处理 Servlet 后端接收问题 针对特定于 Java 的 Web 应用程序(如基于Servlet),可能会遇到参数解析失败的情况。此时需注意两点: - 检查服务端代码逻辑是否能够适当地读取相应格式的数据流[^3] 通过上述方法之一,应该可以有效解决利用 `axios` 发送 POST 请求过程中遇到的各种常见难题。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值