如何在Django中正确设置AJAX

我是Django项目中使用AJAX的新手。我的代码有问题。我试着关注这些帖子：

但有一个概念我不明白

我创建了一个异步任务，并希望通过更新模板来遵循此过程：

<!-- Asynchronous tasks -->
<script type='text/javascript'>
    $(document).ready(function(){
        $('#fd_dropdown').on('change',function(){
            console.log( $(this).val() );
                    var i = 0;
                    console.log(i)
                    var threadInterval = setInterval(function(){
                        checkTask("/checkThread/" + data.id)
                        endTask("/endThread/" + data.id, function(check){
                            if(check.is_done){
                                window.clearInterval(threadInterval)
                            }
                            if(++i === 1200){
                                window.clearInterval(threadInterval)
                            }
                        })
                    },1000)
            })
        })

        function checkTask(url){
            $.ajax({
                type: "POST",
                url: url,
                data: {'csrfmiddlewaretoken': '{{csrf_token}}'},
                success: function(data) {
                    console.log("check!")
                    $('#task_text').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })
        }

        function endTask(url, cb){
           $.ajax({
                type: "GET",
                cache: false,
                url: url,
                dataType: "json",
                success: function(data) {
                    console.log("Done")
                    cb(data)
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })

        }
</script>

我创建了两个URL：

 path('checkTread/<int:id>/', views.checkThreadTask, name='checkThreadTask'),
 path('endTread/<int:id>/', views.endThreadTask, name='endThreadTask'),

checkThreadTask的目的是更新my template和endThreadTask，以便在流程完成时发送布尔值，以停止ajax请求：

在我的模板中：

<!-- Asynchronous tasks -->
<script type='text/javascript'>
    $(document).ready(function(){
        $('#fd_dropdown').on('change',function(){
            console.log( $(this).val() );
                    var i = 0;
                    console.log(i)
                    var threadInterval = setInterval(function(){
                        checkTask("/checkThread/" + data.id)
                        endTask("/endThread/" + data.id, function(check){
                            if(check.is_done){
                                window.clearInterval(threadInterval)
                            }
                            if(++i === 1200){
                                window.clearInterval(threadInterval)
                            }
                        })
                    },1000)
            })
        })

        function checkTask(url){
            $.ajax({
                type: "POST",
                url: url,
                data: {'csrfmiddlewaretoken': '{{csrf_token}}'},
                success: function(data) {
                    console.log("check!")
                    $('#task_text').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })
        }

        function endTask(url, cb){
           $.ajax({
                type: "GET",
                cache: false,
                url: url,
                dataType: "json",
                success: function(data) {
                    console.log("Done")
                    cb(data)
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })

        }
</script>

$（文档）.ready（函数（）{
$（'fd#u下拉列表'）。在（'change'，function（）上{
log（$（this.val（））；
var i=0；
控制台日志（i）
var threadInterval=setInterval（函数（）{
checkTask（“/checkThread/”+data.id）
endTask（“/endThread/”+data.id，函数（检查）{
如果（检查是否完成）{
window.clearInterval（threadInterval）
}
如果（++i==1200）{
window.clearInterval（threadInterval）
}
})
},1000)
})
})
函数检查任务（url）{
$.ajax({
类型：“POST”，
url:url，
数据：{csrfmiddlewaretoken'：{{{csrf_token}}}，
成功：功能（数据）{
log（“检查！”）
$（'#task_text'）.html（数据）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（xhr.状态）；
警报（thrownError）；
}
})
}
函数endTask（url，cb）{
$.ajax({
键入：“获取”，
cache:false，
url:url，
数据类型：“json”，
成功：功能（数据）{
控制台日志（“完成”）
cb（数据）
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（xhr.状态）；
警报（thrownError）；
}
})
}

更新：按照dirkgroten的建议，我犯了一个错误。因为我在控制台中没有捕捉到任何错误，所以我得出结论，没有触发任何事件。我添加了包含下拉菜单的导航栏部分：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">FundBook</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data 
toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
aria-expanded="false"
            aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul id="navbar-subjects" class="navbar-nav text-uppercase mx-auto"><!- 
-navbar-center-->
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false">
                    Peer Group
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="peergroup_dropdown">
                     {%nav_bar_list_peer_groups user.username%}
                </div>
           </li>
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false" id="fd_dropdown">
                    Fund
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="fund_dropdown">
                    {%nav_bar_list_funds user.username%}
                </div>
           </li>
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false">
                    Portfolio
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="portfolio_dropdown">
                    {%nav_bar_list_portfolios user.username%}
                </div>
           </li>

       </ul>
       <ul id="navbar-templates" class="navbar-nav lx-auto">
           <li class="nav-item dropleft">
            <a class="dropdown-toggle" data-toggle="dropdown" 
 id="template_dropdown" aria-haspopup="true" aria-expanded="false">
                Templates
            </a>
               <div class="dropdown-menu text-left" aria-labelledby="template_dropdown">
                   <a class="dropdown-item" href="{% url "fund:fund_template" %}">Fund</a>
                   <a class="dropdown-item" href="{% url "peergroup:peer_group_template" %}">Peer Group</a>
                   <a class="dropdown-item" href="{% url "portfolio:portfolio_template" %}">Portfolio</a>
               </div>
           </li>
           <li>
            <a id="upload" href="{% url "FundBook_Core:form_upload" %}" ><i class="fa fa-upload separate" ></i>  Upload</a>
           </li>
       </ul>
       <ul  id="navbar-login"  class="nav navbar-nav navbar-right ml-auto">
          {% if request.user.is_authenticated %}
                    <a href="{% url "logout" %}" class="separate"><i class="fa fa-sign-out"></i> Logout </a>
                    <a class="separate"> Hello {{ request.user.username }}  </a>
          {% endif %}
          <a href="{% url "dashboard" %}" class="separate"><!--i class="fa fa-user"></i-->My dashboard</a>
       </ul>
    </div>
  </div>
</nav>

菜单


{%nav\u bar\u list\u peer\u groups user.username%}


{%nav_bar_list_funds user.username%}


{%nav\u bar\u list\u公文包用户.用户名%}









{%if request.user.u经过身份验证%}

您能告诉我们您面临的问题是什么吗？还是错误？异步过程运行良好，但是AJAX部分没有发生任何事情。我放了一些console.log（），但在浏览器控制台中看不到任何内容。在ajax函数中，您只处理

success

，而不是

error

。添加这些，因为您可能会返回错误。此外，您还可以在浏览器开发人员工具的“网络”选项卡（对XHR请求进行筛选）中查看请求/响应内容。谢谢您的评论，我收到了您的建议。