XHR failed loading: POST

最新推荐文章于 2025-05-23 11:03:41 发布

转载最新推荐文章于 2025-05-23 11:03:41 发布 · 6.1k 阅读

本文详细解析了DevTool中出现XHR加载失败错误的原因，通常由按钮类型设置不当引起，导致请求发送后被取消。文章提供了两种解决方案：一是使用JavaScript阻止默认行为，二是将按钮类型从submit改为button。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象

DevTool的 Console报错：

VM249 jquery.js:8241 XHR failed loading: POST "http://localhost:8093/api_xxxx".

send	@	VM249 jquery.js:8241
ajax	@	VM249 jquery.js:7720
jQuery.(anonymous function)	@	VM249 jquery.js:7246
calcProductRate	@	VM252 api.js:15
onclick	@	api:119

api.js：15

$.post(url, args, function(data) {

DevTool的 Network的报错

XHR 请求的资源报红色， status （canceled）

分析

按钮的type写成了submit

The event successfully sends the request, but is is canceled then (but processed by the server). The reason is, the elements submit forms on click events, no matter if you make any ajax requests on the same click event.

解决

1. To prevent request from being cancelled, JavaScript event.preventDefault(); have to be called:

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>

2. 改成button

参考

https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools