How can I use the variables from "views.py" in JavasScript, "" in a Django template?

JSON Serialization

If your data comes in the avatar of complex JSON, or has a fancy structure, Django's json_script template tag comes to rescue:

from django.core.serializers.json import DjangoJSONEncoder
import json

def my_view(request):
    context = {
        'my_data': json.dumps(my_complex_data, cls=DjangoJSONEncoder)  // Django to the JSON rescue 🦸
    }
    return render(request, 'template.html', context)


In the template:

{{ my_data|json_script:"my-data" }}

<script>
  let myData = JSON.parse(document.getElementById('my-data').textContent);  // Now you see me!
</script>


Voila! Your data has been serialized safely and is ready for use, bidding goodbye to XSS risks.

Seamless interaction via Ajax

To curate a dynamic, interactive user experience, Django and JavaScript maintain seamless dialogue via Ajax calls:

// Fetching data from the Django backend (aka homeland) 
fetch('/my-ajax-url/')
  .then(response => response.json())  // And the Oscar goes to...
  .then(data => {
    // Your stage to perform complex sequence dance 💃
  });


This enables you to propel data as needed without injecting it directly — a secure and modular strategy.

Beauty of dynamic content

Whenever your webpage glitters with live updates, incorporating Django variables within JavaScript makes up for an efficient drawing room strategy:

function updateContent() {
  let dynamicData = "{{ django_var }}";  // A spy from Django
  // Now `dynamicData` has the key to the castle 🏰
}


Reiterate and always ensure Django variables are having the |escapejs filter in check at the templates — a secret sauce to sound application security!

Grinding with DOM manipulation

Accessing or manipulating the DOM directly using Django variables is as fun as walking in the park. Pass them into javascript and target your elements:

<div id="info">{{ my_info }}</div>

<script>
  let infoElement = document.getElementById('info');  // "Eagle has landed"
  // `infoElement` ready for action! 💥
</script>


This sets foundation for that interactive webpage, where data is busy catering to user's whims or simply being present on ceremonies (events).

Safety first, coders!

When Django and JavaScript confluence occurs, security is your torchbearer to fend off XSS vulnerabilities. Here's just how to put on a brave front:

Security 101: Escaping & sanitizing

Pledge that all variable outputs in your templates are properly escaped. Thanks to Django’s escapejs filter, your string is polished to safely embark on its journey in the JavaScript land.

Handling JSON? json_script

Battle your fears of data having special characters ending up in script injection. Django's json_script template tag here for the much-needed assurance — serializes your variables and treats them as safe.

Eve's Bite: AJAX & security

When AJAX springs in action, pull up Django's CSRF tokens and validate all incoming data — server-side — to ensure they like your coffee — only operations served are safe and secure!

Never drop the guard: XSS protection

Building an application with dynamic content isn't that easy as it sounds! Django's built-in utilities are the holy grails, follow best practices and always be aware of risks to carve a robust web application.