CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
Torben545
Torben545

Reputation: 99

Django Ajax POST empty Error 500

I am trying to let the user select x and y coordinates from an image using cropper.js and pass the data with using ajax to the next view. I am using Django 1.9.4. I am also not really practiced with Javascript, the Javascript part is not written by me.

Using the Firefox Dev Tools Network Tab I seem to get a 500 Internal Server Error. In the Dev Tools view the request has the needed JSON data. However Django does not seem to work the request properly. Why?

Relevant part from 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 (the csrftoken is defined in another function):

 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');
            }
        });
    },

The template:

<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>

Upvotes: 1

Views: 482

Answers (1)

Alasdair
Alasdair

Reputation: 308769

request.POST is only for form-encoded data. If you are sending json encoded data then you should access request.body instead.

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

If you get a 500 error with DEBUG=True, then you should be able to see the traceback using your browser dev tools. If DEBUG=False, then look in your logs or the error email sent to the site admins.

Upvotes: 1

Related Questions