I have a request to use Ajax to get data from Django views. This project was generated through cookiecutter Here is my code:
config/urls.py:
# API URLS
urlpatterns += [
# API base url
path("api/", include("config.api_router")),]
./config/api_router.py:
from django.conf import settings
from django.urls import path
from rest_framework.routers import DefaultRouter, SimpleRouter
from project.users.api.views import UserViewSet
from app import views
if settings.DEBUG:
router = DefaultRouter()
else:
router = SimpleRouter()
router.register("users", UserViewSet)
app_name = "api"
urlpatterns = router.urls
urlpatterns += [
path("chart-data", views.chart_data),
]
app/views.py:
from django.shortcuts import render
from django.http import JsonResponse
def chart_data(request):
return render(request, 'pages/home.html')
def click(request):
data_for_ajax = {
'a': {1: 1, 2: 2}, 'b': {3: 3}, 'c': {4: 4, 5: 5}
}
return JsonResponse(data_for_ajax)
project/templates/pages/home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
function click() {
$.ajax({
type: "GET",
url: "api/chart-data",
success: function(data) {
console.log(data);
}
})
</script>
</head>
<body>
<button onclick="click()">Click me</button>
</body>
When I accessed http://localhost:8000/api/chart-data and clicked the "Click me button", there is nothing in the console, and there is no error.