How to push the data from Javascript to Django backend

Question

I am new to how javascript works, so I am trying to push the time spent on a page using Javascript to Django backend but I do not know how to do it, need some help to know how to do it.

Here is the javascript that is placed in the template:

$(document).ready(function() {
  var startDate = new Date();

  $(window).unload(function() {
      var endDate = new Date();
      $.ajax({ 
        type: POST,
        url: "/backendurl",
        data: {'timeSpent': endDate - startDate},
       
      })
   });
});

I am not sure what to do to push the data to Django backend using above Jquery POST.

how do i layout the data in Django backend? I am not sure how to view the data — Shiko
– Shiko, Commented Nov 7, 2020 at 1:49

Daniel · Accepted Answer · 2020-11-07 02:27:51Z

1

urls.py:

urlpatterns = [
    ...
    path('backendurl', views.my_view_function, name='backendurl',
    ...
]

views.py:

def my_view_function(request):

    # unpack request:
    timeSpent = request.POST['timeSpent']

    # do some logic:
    ...

    # pack response:
    response = json.dumps({
        'status' : 'ok',
    })

    return HttpResponse(response)

script.js:

...
$.ajax({ 
  type: POST,
  url: "backendurl", // be mindful of url names
  data: {
    'timeSpent': endDate - startDate || 'none' // defaults to a string
  },
  success: function(response) {

    // unpack response:
    status = response.status

  }
})

edited Nov 7, 2020 at 2:27

answered Nov 7, 2020 at 1:54

Daniel

3,5371 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shiko Over a year ago

I followed the steps but i received MultiValueDictKeyError at /backendurl/ 'timeSpent'

Daniel Over a year ago

That is likely because you are passing nothing into the ajax request, see my edited solution for how to set a default value.

Shiko Over a year ago

could there be another reason for this error to appear as it is still showing?

Shiko Over a year ago

the error is showing to due to the line in the views: timeSpent = request.POST['timeSpent'] , the data should appear in 127.0.0.1:8000/backendurl/ but it returns MultiValueDictKeyError at /backendurl/

Daniel Over a year ago

This occurs because there is no parameter named 'timeSpent' in your ajax post request. If a field is null or undefined, ajax will not send it through in the post request. Hence you likely did not correctly set this field in your ajax post request and thus the error.

Collectives™ on Stack Overflow

How to push the data from Javascript to Django backend

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related