Ajax向REST API发送JSON数据无响应问题求助

你遇到的点击提交后页面一直加载、无反馈的问题，大概率是几个常见的前端请求配置错误导致的，我帮你梳理几个关键排查点：

1. JSON数据格式不匹配 #

你设置了contentType: 'application/json'，这要求请求体必须是JSON字符串，但你直接传入了JavaScript对象ItemJSON，后端无法解析这种格式的数据，导致请求挂起。

解决方法：用JSON.stringify()把对象转换为JSON字符串：

data: JSON.stringify(ItemJSON),

2. 按钮默认提交行为干扰 #

你的按钮是type="submit"，如果它嵌套在<form>标签内，点击时会触发表单的默认提交动作（页面刷新/跳转），这会中断AJAX请求，导致页面一直处于加载状态。

两种解决方式：

• 方式一：修改按钮类型为button，避免触发默认提交：

<button type="button" onclick="sendoi()" class="site-font-light mobile-handler">Submit</button>

• 方式二：在函数中阻止默认事件：
  修改按钮的onclick传参：

<button type="submit" onclick="sendoi(event)" class="site-font-light mobile-handler">Submit</button>

然后在sendoi函数开头添加：

function sendoi(event) {
    event.preventDefault(); // 阻止默认提交行为
    // 后续AJAX代码...
}

3. 完善错误调试信息 #

当前的error回调太简略，无法定位具体问题。建议扩展错误处理，打印详细的请求错误信息到控制台：

error: function(xhr, status, error) {
    console.error('请求错误状态:', status);
    console.error('错误详情:', error);
    console.error('后端响应内容:', xhr.responseText);
    alert('提交失败，请打开浏览器控制台查看具体错误');
}

这样你能直接看到是请求超时、后端报错还是数据格式问题。

4. 验证API端点的可用性 #

先排除后端API的问题：用Postman或者浏览器的Network工具，手动发送POST请求到http://localhost/dbsapi/api/data/postpdfeducation，携带正确的JSON数据，看是否能正常响应。如果API本身返回错误（比如500、404），那前端请求自然会无反馈。

5. 跨域问题排查 #

如果你的前端页面运行的域名/端口和API不同（比如前端在http://localhost:8080，API在http://localhost），会触发浏览器的CORS跨域限制，导致请求被拦截。可以查看浏览器控制台的Console标签，是否有CORS policy相关的错误提示。

修改后的完整代码示例 #

JavaScript：

function sendoi(event) {
    event.preventDefault();
    
    var ItemJSON = {"salutation":"tes","location":"tes","reference_code":"tes","isCustomer":1,"email_to":"yudi@nawadata.com","phone":"089999999","front_name":"Adhitya","name":"Adhitya","age":13,"marital_status":"tes","dependents":"tes","income":"100000","cover":["Legacy","Education","Retirement"],"total_allocated":10000000,"total_tuition":300000,"total_cost":200000,"total_gap":1211212121,"target":"2323232323","file_name":"tes","language":"id","isFromUmbrella":1,"collegeperiod":2017,"collegeage":14,"collegecosttotal":2000000,"sangatpenting":"tes","tigaprioritas":"tes","arr_child":[{"name":"coba","monthly_saving":20000,"educost":2000,"destination_university":10000,"year_to_university":1000,"year":2017}],"arr_triangle":[{"name":"invesment","background":"#c00","size":1},{"name":"retirement","background":"#c00","size":1},{"name":"education","background":"#c00","size":1},{"name":"legacy","background":"#c00","size":1},{"name":"health","background":"#c00","size":1},{"name":"life","background":"#c00","size":1}]};
    
    $.ajax({
        url: 'http://localhost/dbsapi/api/data/postpdfeducation',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(ItemJSON),
        dataType: "json",
        success: function(){
            alert('提交成功！');
        },
        error: function(xhr, status, error) {
            console.error('请求出错:', status, error);
            console.error('后端响应:', xhr.responseText);
            alert('提交失败，请查看控制台详情');
        }
    });
};

HTML：

<button type="submit" onclick="sendoi(event)" class="site-font-light mobile-handler">Submit</button>

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