应用内POST数据失败求助：含HTML/Ajax代码及提交反馈需求

问题分析 #

你的代码存在几个关键问题导致Ajax调用失效：

• 数据格式不合法：data参数使用的字符串不是完整的JSON结构，缺少外层大括号，直接拼接字符串也容易出现格式错误
• URL不完整：请求地址xyz.com/api未指定协议（http/https），会被解析为当前页面的相对路径
• 页面加载时自动执行请求：脚本末尾直接调用了ajaxCall()，导致页面一加载就发起请求，而非仅点击按钮时触发
• 缺少错误处理逻辑：未捕获请求失败的情况，无法排查问题根源
• 未实现成功提示：成功回调里仅打印日志，没有给用户直观的操作反馈

修正后的代码 #

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0px 0px 2px 2px rgb(0,0,0);
}

.button1 {background-color: #071e26;} /* Dark Blue*/
.button1:hover {
      background-color:#e9f5f9;
      transition: 0.2s;
      color: #071e26;
  }
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<h1>用户确认</h1>
<p>如果您已收到笔记本电脑，请点击下方确认</p>

<button id="AssetAmt" class="button button1" onClick="ajaxCall()">确认收到</button>
<!-- 用于显示提示信息的元素 -->
<div id="message" style="margin-top:20px; display:none; padding:10px; border-radius:5px;"></div>

    <script>
        function ajaxCall() {
            // 禁用按钮防止重复提交
            const btn = document.getElementById('AssetAmt');
            btn.disabled = true;
            btn.textContent = '提交中...';

            $.ajax({
                type: "POST",
                url: "https://xyz.com/api", // 添加完整协议，根据实际情况调整为http或https
                data: JSON.stringify({ // 使用JSON对象转字符串，确保格式合法
                    "citype": {
                        "name": "Windows Workstation",
                        "criterias": {
                            "criteria": {
                                "parameter": {
                                    "name": "CI Name",
                                    "value": "xyz.dummy.com"
                                }
                            }
                        },
                        "newvalue": {
                            "record": {
                                "parameter": [
                                    {
                                        "name": "Model",
                                        "value": "Model 2023"
                                    },
                                    {
                                        "name": "Location",
                                        "value": "Optional"
                                    }
                                ]
                            }
                        }
                    }
                }),
                contentType: "application/json", // 明确告诉服务器请求数据类型为JSON
                success: function (result) {
                    console.log(result);
                    // 显示成功提示
                    const msgEl = document.getElementById('message');
                    msgEl.textContent = '详情已提交！';
                    msgEl.style.display = 'block';
                    msgEl.style.backgroundColor = '#d4edda';
                    msgEl.style.color = '#155724';
                    // 恢复按钮状态
                    btn.disabled = false;
                    btn.textContent = '确认收到';
                },
                error: function(xhr, status, error) {
                    // 显示错误提示
                    const msgEl = document.getElementById('message');
                    msgEl.textContent = '提交失败，请稍后重试';
                    msgEl.style.display = 'block';
                    msgEl.style.backgroundColor = '#f8d7da';
                    msgEl.style.color = '#721c24';
                    console.error('请求错误:', error);
                    // 恢复按钮状态
                    btn.disabled = false;
                    btn.textContent = '确认收到';
                },
                dataType: "json"
            });
        }
        // 移除自动调用，仅保留按钮点击触发逻辑
    </script>

</body>
</html>

关键修改说明 #

• 修复数据格式：使用JSON.stringify()将JSON对象转换为合法的JSON字符串，同时添加contentType: "application/json"参数，确保服务器能正确解析请求数据
• 补全URL协议：在请求地址前添加https://（根据实际部署环境调整为http），避免被解析为相对路径
• 移除自动调用：删除脚本末尾的ajaxCall()，确保请求仅在用户点击按钮时触发
• 添加提示元素：新增<div id="message">用于显示成功/错误提示，通过动态修改样式控制显示状态
• 添加错误处理：新增error回调，捕获请求失败场景并提示用户，同时打印错误日志便于调试
• 按钮状态控制：提交时禁用按钮并修改文字，防止重复提交，请求完成后恢复按钮正常状态

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