AJAX 可以访问 Django HttpResponse 变量

Posted 2023-02-24

【中文标题】AJAX 可以访问 Django HttpResponse 变量

【英文标题】：AJAX gets access to Django HttpResponse variables

【发布时间】：2018-01-08 04:51:15

【问题描述】：

我正在为一个更大的项目编写一个小型测试应用程序。我想使用异步 FileReader() 从客户端读取 txt 文件，并使用 AJAX 将文本体传递给 Django 服务器。当服务器成功获取“posted”文本时，它会返回文本的长度。它在服务器上运行良好，我得到了我的预期。但现在我想将文本（长度）的大小传回给客户端，并异步显示在网页上的某个位置。但是失败了……这是我的代码：

HTML

<script type="text/javascript">
    var render_text = function(csvFile, onLoadCallback)
        var reader = new FileReader();
        reader.onload = onLoadCallback;
        reader.readAsText(csvFile);
    

    $(document).ready(function()

        $("#id_csvFileInput").on("change", function(e)
            render_text(this.files[0], function(e)
                var text = e.target.result;
                $.ajax(
                    url: "",
                    type: 'POST',
                    async: true,
                    data: 'text': text,
                    success: function(data)
                        $("#id_test").text(data.size);
                    
                );
            );
        );
    );

</script>

<p>
    <input type="file" name="csvFileInput" id="id_csvFileInput" accept=".csv">
</p>

<div>
    <p>Waiting for reponse context....</p>
    <span id="id_test">?</span>
</div>

View.py

# Home page.
@csrf_exempt
def home(request):
    template = 'hbvapp/home.html'
    context = 
    if request.method == "POST" and request.is_ajax():
        context['test'] = request.POST.get('text')
        context['size'] = len(context['test'])
        print context['size']
        return render(request, template, context)
    else:
        return render(request, template)

我们将不胜感激任何帮助！ 问候

【参考方案1】：

试试看

from django.http import JsonResponse

    if request.method == "POST" and request.is_ajax():
        context['test'] = request.POST.get('text')
        context['size'] = len(context['test'])
        print context['size']
        return JsonResponse(context)
        #       ^^^^^

更多详情jsonresponse

【讨论】：

天哪！工作完美。我是网络应用程序开发的新手。我想对 JQuery、AJAX 和 Json 做更多的研究！非常感谢！

【参考方案2】：

你也可以这样发送：

context['test'] = request.POST.get('text')
context['size'] = len(context['test'])
print context['size']
return HttpResponse(json.dumps(context), content_type='application/json')

在你的 js 中你可以像这样访问它：

success: function(data)
                    $("#id_test").text(data['size']);