Use django view to send javascript variable as POST request

Question

Dear all after fighting several days I decided to ask your help, as django newby I am..

I tried to follow this Call Django on HTML button click with no success.

Scope: I want to use a django view to send a variable generated in one js script which has a json format. I need to send that data to an external server, and hence I thought I will need a POST request in the views (not yet included). To make things rolling and to start from somewhere, I thought that after the submit button is pushed, I can load a new page (points.html) just to see that the data are recovered within the views.py.

main html template (web_map.html):

    {% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webmap</title>
  </head>
  <body>
    <form id="options-form" autocomplete="off">
      <label><input type="radio" name="interaction" value="draw" checked> Draw<br></label>
      <label><input type="radio" name="interaction" value="modify"> Modify<br></label>
    </form>

    <form action="sendJson" method="GET">
    {% csrf_token %}
    <div id="submit-button">
      <button class="btn btn-primary btn-sm" type="submit">Submit</button>
    </div>
    </form>

    <script src="{% static 'dist/main.js' %}"></script>

  </body>
</html>

My main.js:

var submitBtn = document.getElementById('submit-button');

submitBtn.addEventListener("click", function() {
    var pointsJson = submitPoints(vectorPoint);
    $.ajax({
        type: "GET",
        contentType: "application/json",
        url: 'sendJson',
        data: pointsJson,
        dataType : "json",
        success: function(result) {
            console.log(result);
        }
    })
}
);

Up to here I retrieve the data I need, but I don't now how to send pointsJson to the django view. This is the data I need to send to the external server as well.

urls.py:

from django.urls import path
from django.views.generic import TemplateView

from . import views

urlpatterns = [
    path('',
         TemplateView.as_view(template_name='web_map.html'), name='web_map'),
    path('sendJson', views.sendJson),
]

views.py:

from django.shortcuts import render
import json

def web_map(request):
    return render(request, 'web_map.html')


def sendJson(request):
    points = {"point1": "123"}
    return render(request, 'points.html', points)

points.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Points</title>
  </head>
  <body>
      {{ points }}
  </body>
</html>

Unfortunately I am rather confused at the moment and I would really appreciate any hint for the following questions:

How to get my pointsJson var into the views.
How can I send it to the external server when the user pushes the submit button?

I hope I am analytical enough and my example code will help.. Many thanks for your time!

EDIT

If you torture enough the code it will confess. I found some bugs and I edited the code above. Unfortunately there are still problems to address.

With regard to use the correct template after pushing the submit button:

web_map.html: the action tag was moved to the form tag instead of being attached to the button.

For the variable recovery from index.js to the views.py I added an ajax call. Up to now there is no success.. and still remains the question how to transfer the data (assuming I get them in my views.py) to the external server.

Use django view to send javascript variable as POST request

0 Answers0