JavaScript fetch请求重复触发及网络错误问题求助

一、请求被触发两次的原因及修复 #

可能的原因及对应解决方法： #

1. 按钮点击事件重复绑定
   检查页面脚本：是否同时用了onclick属性和addEventListener绑定post_db函数？如果是，移除其中一种绑定方式即可。比如同时存在onclick="post_db()"和document.querySelector('.btn-success').addEventListener('click', post_db)，就会导致两次触发。

2. 页面存在重复按钮
   查看渲染后的HTML结构：是否有两个Conferma按钮？可能是模板代码重复渲染或DOM元素复制导致，删除多余按钮即可。

3. 脚本重复加载
   检查页面脚本引入：是否多次引入了包含post_db函数的JS文件？比如模板里重复用{% static %}引入同一脚本，会导致函数被重新定义，点击时执行两次。确保脚本只加载一次。

4. 事件冒泡触发重复调用
   检查按钮父元素：是否有父级元素绑定了点击事件且未阻止冒泡？比如父级<div>也绑定了点击事件，会导致按钮点击时触发自身和父级的事件，进而两次调用post_db。
   修复方法：给post_db函数添加事件阻止逻辑：

   function post_db(event) {
     event.preventDefault();
     event.stopPropagation();
     // 原有代码...
   }
   

   同时按钮的onclick改为onclick="post_db(event)"。

二、Firefox控制台NetworkError的处理 #

这个错误是因为fetch请求未完成时，调用window.location.replace(data.url)跳转页面，浏览器中止了当前未完成的网络请求，导致Promise被拒绝抛出错误。可以添加catch块捕获该错误，避免控制台报错：

修改JS代码中的Promise链：

postData().then((data) => { 
    window.location.replace(data.url); 
}).catch((error) => {
    // 仅处理页面跳转导致的请求中止错误
    if (error.name === 'TypeError' && error.message.includes('NetworkError')) {
        return;
    }
    // 其他错误按需处理
    console.error('请求出错:', error);
});

额外的Django端优化建议 #

• 无需手动解析request.body，Django 3.1+可直接用request.json获取JSON数据：

  def fetch_new_seq(request):
      json_ricevuto = request.json
      print(json_ricevuto)
      redirect_url = reverse('newSeq')
      return JsonResponse({'url': redirect_url})
  

• 注意：messages.success在AJAX请求中无效，因为消息不会被渲染到跳转后的页面。如果需要显示提示，可将消息内容放入返回的JSON中，前端跳转后通过JS展示。

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