前端增加javascript代码后为什么不再响应后台HttpRespond了？

最近在做一个项目，需求是前端上传一个表格，后端处理后将结果返回给前端。为了提示表格上传进度，我找了网上的代码，如下：

<script>
        function on_upload(evt){
            if(evt.lengthComputable){
                var ele = document.getElementById('prog_bar');
                var percent = Math.round((evt.loaded)*100/evt.total);
                ele.setAttribute('aria-valuenow',percent.toString());
                ele.style.width = percent + '%'
                ele.innerHTML = percent + '%'
            }
        }
                function a(){
            if($('#file_input').val()!=''){
                $('#upload_text').text('uploading...');
                var table = document.getElementsByTagName('input')[1].files[0]
                var fd = new FormData();

                var xhr = new XMLHttpRequest();
                xhr.open('post','/frags/upload_table/',true);
                fd.append('csv',table);
                fd.append('csrfmiddlewaretoken','{{ csrf_token }}')
                xhr.send(fd);
            }
        }
                $(document).ready(function(){
            $("#sub_btn").click(a);
        });
</script>

后端的代码大概就是：

def upload_table (request):
    if request.method == 'POST':
            #处理表格
                return HttpResponse('success')
        else:
                return render(request,'前端页面')

现在发现后台处理结束返回后，前端的页面没有变化，好像没有接受到后台返回的httpResponse一样。但是如果把前端的javascript内容删除以后就正常了。是我的javascript写的有问题么？
zhaohs12@163.com

评论 1

  •
    zhaohs12@163.com

    我自己解决了，在xhr.onreadstatechange中指定处理后端返回函数，里面写document.write(xhr.httpresponse)就好