HTML页面POST方法请求接口返回400错误如何解决

核心错误原因 #

• 重复ID冲突：页面内列表容器和添加按钮都使用了id="add"，DOM选择器匹配混乱，导致事件绑定、列表渲染都可能异常。
• 输入值获取错误：获取输入框内容的写法$name.val缺少执行括号，正确写法为$name.val()，否则拿到的是方法本身而非输入内容。
• POST请求逻辑错位：POST对应的AJAX代码写在了点击事件回调外部，页面加载完成就会自动发送请求，而非点击按钮时触发，此时输入框无有效内容，参数自然无效。
• query参数未定义：query模板字符串中使用的${name}、${type}没有对应变量定义，后端收到的查询语句格式错误无法解析，是触发400报错的直接原因。
• jQuery重复引入：先后加载了3个不同版本的jQuery，容易引发方法冲突，保留一个即可。
• 回调参数使用错误：jQuery AJAX的success回调第一个参数才是接口返回的数据，你声明的第二个参数Newitem实际是请求状态文本，无法拿到新增的条目数据。

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Add recycables</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="/">
    <!-- 仅保留一个版本的jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <!-- 修正重复ID，列表容器改为itemList -->
    <div id="itemList"></div>
    <p>添加可回收物</p>
    <p>名称: <input type="text" id="name"></p>
    <p>类型:<input type="text" id="type"> </p>
    <!-- 按钮ID改为addBtn避免冲突 -->
    <button id="addBtn">添加</button>
</body>

<script>
    $(document).ready(function(){
        var $items = $('#itemList');
        var $name = $('#name');
        var $type = $('#type');
        // GET请求逻辑保留，无问题
        $.ajax({
            url:"https://ecoexchange.dscloud.me:8080/api/get",
            method:"GET",
            headers:{
                query:"RecyclableGet(0)",
                apikey:sessionStorage.getItem("apikey")
            },
            success:function(data) {
                $.each(data, function(i, item){
                    $items.append('<li>名称: '+item.Name +', 类型: '+ item.RecyclableType + '</li>');
                });
            },
            error:function(xhr,textStatus,err) {
                console.log(err);
            }
        });

        // 绑定按钮点击事件
        $('#addBtn').on('click', function(){
            // 获取输入框值
            var name = $name.val().trim();
            var type = $type.val().trim();
            // 非空校验，可根据需要调整
            if(!name || !type) {
                alert("名称和类型不能为空");
                return;
            }
            // POST请求移到点击事件内部
            $.ajax({
                url:"https://ecoexchange.dscloud.me:8080/api/post",
                method:"POST",
                headers:{
                    // 替换为正确的变量值
                    query:`RecyclableAdd('${name}','${type}')`,
                    apikey:sessionStorage.getItem("apikey")
                },
                success:function(data){
                    // 从返回的data中取新增条目，根据实际接口返回结构调整即可
                    $items.append('<li>名称: '+data.Name +', 类型: '+ data.RecyclableType + '</li>');
                    // 提交完成清空输入框
                    $name.val('');
                    $type.val('');
                },
                error:function(xhr,textStatus,err) {
                    console.log(err);
                }
            })
        })
    })
</script>
</html>

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