Spring MVC中JSP兼容text/html与application/json及POST 415错误解决

普通HTML表单默认会以application/x-www-form-urlencoded格式提交数据，而你的后端要求application/json，所以必须用JavaScript拦截表单提交，手动构造JSON请求。

具体修改步骤： #

• 给表单添加唯一ID，方便JS获取；将提交按钮改为普通按钮（或保留submit按钮但阻止默认提交行为）
• 编写JS代码，获取表单输入值，转为JSON对象
• 使用fetch API发送POST请求，设置正确的Content-Type请求头

修改后的JSP代码： #

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <style>
      
    </style>
</head>

<body>

<div class="admin div">
    <h2>Options for Admin</h2>
    <li><a href="">Create User</a></li>
    <li><a href="">Update User</a></li>
    <li><a href="">Delete User</a></li>
    <li><a href="${pageContext.request.contextPath}/rest/admin/users/100003" class="deal">Get User by ID(for example 100003</a></li>
    <li><a href="${pageContext.request.contextPath}/rest/admin/users/by-email?email=david_D@gmail.com" class="deal">Get User by Email(for example - david_D@gmail.com)</a></li>
    <li><a href="${pageContext.request.contextPath}/rest/admin/users" class="deal">All users</a></li>
    <br>
    <li><a href="">Create restaurant</a></li>
    <li><a href="">Update restaurant</a></li>
    <li><a href="">Delete restaurant</a></li>
    <br>
    <li>
    <form id="addMealForm" action="${pageContext.request.contextPath}/rest/admin/restaurants/100005/meals">
            <div class="add">
                <dt>Description</dt>
                <input type="text" name="description" value="Some Meal"><br> </input>
            </div>
            <div class="add">
                <dt>Price</dt>
                <input type="number" name="price" value="50"><br> </input>
            </div>
            <button type="button" onclick="submitMealForm()">SAVE</button>
    </form>
    </li>
    <br>
    <li><a href="">Update meal</a></li>
    <li><a href="">Delete meal</a></li>
    <li><a href="/rest/admin/restaurants/100005/meals" class="deal">Get actual meals (for example - by restaurant with ID = 100005)</a></li>
    <li><a href="/rest/admin/restaurants/100005/meals/100010" class="deal">Get meal by ID (for example - by restaurant with ID = 100005, meal ID = 100010)</a></li>
</div>

<script>
function submitMealForm() {
    // 获取表单元素和输入值
    const form = document.getElementById('addMealForm');
    const description = form.querySelector('[name="description"]').value;
    const price = parseInt(form.querySelector('[name="price"]').value);
    
    // 构造JSON数据
    const mealData = {
        description: description,
        price: price
    };
    
    // 发送POST请求
    fetch(form.action, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 如果后端需要认证，这里可以添加Authorization头，比如：
            // 'Authorization': 'Bearer ' + token
        },
        body: JSON.stringify(mealData)
    })
    .then(response => {
        if (response.ok) {
            alert('Meal added successfully!');
            // 可选：重置表单
            form.reset();
        } else {
            alert('Failed to add meal. Status: ' + response.status);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while adding the meal.');
    });
}
</script>

</body>
</html>

关键说明： #

• 用fetch API代替表单默认提交，手动设置Content-Type: application/json请求头
• 将表单输入值转为JSON对象，再用JSON.stringify()转为字符串作为请求体
• 处理响应结果，给用户反馈操作状态
• 表单action路径使用${pageContext.request.contextPath}拼接，避免部署时的路径问题

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