Django Ajax POST空错误500

时间:2017-12-19 14:01:15

标签: javascript jquery python ajax django

我试图让用户使用cropper.js从图像中选择x和y坐标,并使用ajax将数据传递到下一个视图。我正在使用Django 1.9.4。我也没有真正使用Javascript,Javascript部分不是我写的。

使用Firefox Dev Tools网络选项卡我似乎得到500内部服务器错误。在Dev Tools视图中,请求具有所需的JSON数据。但是,Django似乎没有正确地处理请求。为什么呢?

来自views.py的相关部分:

def render_stl(request):
    print("Got to STL render")
    if request.method == 'POST':
        print("BELOW DATA")
        print(request.POST)    # <QueryDict: {}>
        print(request.is_ajax())    # False
        print(request.POST.__dict__)    # {'_encoding': 'utf-8', '_mutable': False}

        # This is old from a former version, but should be updated if ajax works
        x_start = request.POST.get("x_start")
        z_start = request.POST.get("z_start")
        x_end = request.POST.get("x_end")
        z_end = request.POST.get("z_end")

        print(x_start, z_start, x_end, z_end)
        run_stl_render(x_start, z_start, x_end, z_end)

        # os.chdir(settings.MEDIA_ROOT)
        stl_file = open(settings.MEDIA_ROOT + "/mySTL.stl", "r")
        django_file = File(stl_file)


        return render(request, 'img_crop/render_stl.html', {'django_file': django_file})

urls.py:

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^render_img$', views.upload_file, name='render_img'),
    url(r'^render_stl$', views.render_stl, name='render_stl'),
    url(r'^download_stl$', views.download_stl, name='download_stl'),
    # url(r'^media/mySTL.stl', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),

]

Javascript(csrftoken在另一个函数中定义):

 sendDataOfCroppedImage = function(dataOfCroppedImage) {
     // var data = 'data : [' + JSON.stringify(dataOfCroppedImage) + ']';
     var data_s = JSON.stringify(dataOfCroppedImage);
     console.log('data',data_s);
        $.ajax({
            async: true,
            crossDomain: true,
            method: 'POST',
            data: data_s,
            dataType: 'json',
            headers:  {
                'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest',
                'content-type': 'application/json',
                'cache-control': 'no-cache',
                'X-CSRFToken': csrftoken
            },
            url: 'render_stl',
            success: function () {
                console.log('sendDataOfCroppedImage okay');
            }
        });
    },

模板:

<html>
{% load staticfiles %}
<head>
<title>
Your rendered image
</title>
 <script src="{% static 'img_crop/js/jquery-3.2.1.js' %}"></script>
<script src="{% static 'img_crop/js/cookie.js' %}"></script>
<script src="{% static 'img_crop/js/cropper.js' %}"></script>

 <link href="{% static 'img_crop/css/cropper.css' %}" rel="stylesheet">
<style>
    #image {
        max-width: 100%; 
    }
</style>
</head>
<body>
<h1>Hier ist das generierte Bild aus Ihrer Welt!</h1>
<h2>Wählen Sie nun Ihren Bereich aus: </h2>

<div style="overflow: hidden; width: 400px; height: calc(400px / 16 * 9);">
<div>
    <img id="image" src="{% static "img_crop/MC2px.png" %}" alt="Rendered image"/>
</div>
</div>

<button id="getDataBtn" class="button get-data">Submit Choice</button>

1 个答案:

答案 0 :(得分:0)

request.POST仅适用于表单编码数据。如果您要发送json编码数据,则应该访问request.body

data = json.loads(request.body.decode('utf-8'))

如果DEBUG = True时出现500错误,那么您应该可以使用浏览器开发工具查看回溯。如果是DEBUG=False,请查看您的日志或发送给网站管理员的错误电子邮件。