Как совместить AJAX и Django

125

01 декабря 2020, 12:30

Только начал изучать jQuery и AJAX, однако застрял на самом простом примере.

По нажатию на кнопку требуется передать строку на сервер, далее выполнить конкатенацию с другой строкой, передать новую строку на клиент и вывести её с помощью alert. Однако строка не выводиться, вместо этого выводиться 'ошибка'.

station_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.1/themes/smoothness/jquery-ui.min.css">
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                var data = "station";
                $.ajax = ({
                    method: "GET",
                    url: 'task1/filter/',
                    data: {
                        'data': data
                    },
                    success: function (data) {
                        alert(data);
                    },
                    error: alert('ошибка')
                })
            });
        });
    </script>
</head>
<body>
<button id="btn1">Фильтр</button>
</body>
</html>

urls.py

from django.conf.urls import url, include
from .views import List
from . import views
urlpatterns = [
    url(r'^$', List.as_view(), name='list-view'),
    url(r'^filter', views.filter),
]

views.py

from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Station
def filter(request):
    if request.GET:
        data = request.GET.get("data")
        data2 = '34' + data
    return data2

class List(TemplateView):
    template_name = 'station_list.html'
    def get(self, request):
        Longitude = Station.objects.values_list("longitude", flat=True)
        Latitude = Station.objects.values_list("latitude", flat=True)
        NameStation = Station.objects.values_list("name", flat=True)
        Link = Station.objects.values_list("link", flat=True)
        ctx = {
            'Longitude': Longitude, 'Latitude': Latitude, 'NameStation': NameStation, 'Link': Link
        }
        return render(request, self.template_name, ctx)

Как мне кажется если напротив error или success добавить функцию, то она вообще не будет срабатывать. То есть, если написать:

error: function() { alert('ошибка'); }

ничего не сработает. Но если написать так: error: alert('ошибка'); то всё сработает. Никак не могу понять в чем ошибка?

Answer 1

Нужно добавить более полезный обработчик ошибки

$.ajax({
    ...
    error: function(xhr, status, error) {
        console.log(error);
    }
});

и посмотреть в консоли, какая именно ошибка возникает.

Answer 2

Исправил следующие ошибки в коде:

1) В представление неправильно был указан url

    $(function () {
        $("#btn1").click(function () {
            var data = "station";
            $.ajax({
                method: "GET",
                url: '/map/filter/', //Здесь была ошибка
                data: {
                    'data': data
                },
                success: function (data) {
                    console.log(data);
                },
                error: function (xhr, status, error) {
                    console.log(error);
                }
            })

2) Во views.py надо изменить метод filter следующим образом

from django.shortcuts import render
from django.views.generic import TemplateView
from django.http import HttpResponse
data2 = ''
def filter(request):
    if request.GET:
        data = request.GET.get('data')
        data2 = data
    return HttpResponse(data2+'3')