Как отправить модель django в javascipt?

Как передать модель django в javascript? В частности, я хочу передать модель django Movie в javascript. В javascript я хотел бы отобразить id чего-то в модели фильма во время оценки с помощью оператора if.

def index(request):
    if Movie.objects.order_by('-stars').exists():
        movie = list(Movie.objects.order_by('-stars'))
    if TV.objects.order_by('-stars').exists():
        tv = TV.objects.order_by('-stars')
        print(tv)
    context = {
        'movie':movie,
    }
    return render(request, 'Movie/index.html',context)

fetchTrendingResults("all", "week")

        var mediaType = document.getElementById("media_type")
        mediaType.addEventListener("change", function(event) {
            fetchTrendingResults(mediaType.options[mediaType.selectedIndex].value, "day")
        })

        function fetchTrendingResults(media_type, time_window) {
            var trendingDiv = document.getElementById("trendings")
            trendingDiv.innerHTML = ""
            if (media_type == "score"){
                var js_list = {{movie}};
            }
            else{
            fetch(`/api/trendings?media_type=${media_type}&time_window=${time_window}`, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json"
                }}
                // todo:movieとTVのIDをもらってこれをURLにFethして映画とTVの情報をそれぞれでスターが高い順に表示する。
                )
            .then(res => res.json())
            .then(data => {
                for (let i=0; i<data.results.length; i++) {
                    var mainDiv = document.createElement("div");
                    mainDiv.setAttribute("class", "card");
                    mainDiv.setAttribute("style", "width: 18rem;");
                    var img = document.createElement("img");
                    img.setAttribute("src", "https://image.tmdb.org/t/p/w200" + data.results[i].poster_path);
                    img.setAttribute("class", "card-img-top");
                    img.setAttribute("alt", "...");
                    var body = document.createElement("div");
                    body.setAttribute("class", "card-body");
                    var title = document.createElement("h5");
                    title.setAttribute("class", "card-title");
                    if (data.results[i].name) {
                        title.innerHTML = data.results[i].name;
                    } else {
                        title.innerHTML = data.results[i].title;
                    }
                    //var text = document.createElement("p");
                    //text.setAttribute("class", "card-text");
                    //text.innerHTML = data.results[i].overview;
                    var link = document.createElement("a");
                    link.setAttribute("href", "/" + data.results[i].media_type + "/" + data.results[i].id + "/");
                    link.setAttribute("class", "btn btn-primary");
                    link.innerHTML = "View Details";
                    body.appendChild(title);
                    //body.appendChild(text);
                    body.appendChild(link);
                    mainDiv.appendChild(img);
                    mainDiv.appendChild(body);
                    document.getElementById("trendings").appendChild(mainDiv);
                }
            })
        }
        }

Как передать модель django в javascript? В частности, я хочу передать модель django Movie в javascript. В javascript я хотел бы отобразить id чего-то в модели фильма во время оценки с помощью оператора if.

Вы можете отправлять данные модели, просто возвращая JsonResponse из представления (и, например, создавая JSON dict с помощью forlooping QuerySet, или используя model_to_dict встроенный метод Django) или сохраняя свою логику и отправляя html, который вам нужно переопределить - даже лучше - вы можете делать оба способа одновременно.

Итак, в основном вы пишете представление следующим образом:

from django.forms import model_to_dict
from django.http import Http404


def custom_ajax_view(request):
    if request.method != 'POST':
        raise Http404
    movies = Movie.objects.order_by('-stars')
    movie_dict = {}
    if movies.exists():
        movie_dict = {obj.id: model_to_dict(obj) for obj in movies}
    tv = TV.objects.order_by('-stars')
    tv_dict = {}
    if tv.exists():
        tv_dict = {obj.id: model_to_dict(obj) for obj in tv}
    context = {
        'movie': movie,
    }
    html = render_to_string(
        'Movie/index.html', context=context)
    return JsonResponse({
        'movies': movie_dict,
        'tvs': tv_dict,
        'html': html,
    })

Затем вы получаете данные с помощью метода Ajax (я предпочитаю использовать для этого jQuery), написав:

$.ajax({
    url: CUSTOM_AJAX_URL,
    type: 'post',
    dataType: 'json',
    success: function (data) {
        // Here you retrieve your data and you can do something with it.
        console.log(data)
    }
});

Вы также можете решить вашу CUSTOM_AJAX_URL с помощью логики шаблона (разместите ее в конце шаблона)

<script>
    const CUSTOM_AJAX_URL = "{% url 'custom_ajax_view' %}";
</script>
<script src="{% static 'your_script_name.js' %}"></script>

Затем ваш скрипт должен увидеть CUSTOM_AJAX_URL (если вы используете скрипт не напрямую, используя метод inline, а включаете скрипт через тег script и размещаете его вместе со статическим методом в коде). Если вы разместите его напрямую, вы сможете передать URL непосредственно методу AJAX.

Вернуться на верх