0

調査を試みましたが、Ajax を使用して Django で META リクエストを処理する方法が見つかりませんでした。毎回ページを更新すると、UX が破壊されます。したがって、コードが次のような場合:

テンプレート

<a href="/like/?id={{ car.id }}" ># of likes: {{ car.likes }}</a>

ビュー.py

def like_page(request):
    if 'id' in request.GET:
        id = request.GET['id']
        car = Cars.objects.get(id=id)
        car.likes += 1
        car.save()
    if 'HTTP_REFERER' in request.META:
        return HttpResponseRedirect(request.META['HTTP_REFERER'])
    return HttpResponseRedirect('/')

したがって、テンプレートはオブジェクトの ID を送信し、ビューでは、これが発生するたびに like を 1 ずつ増やします。ここでの問題は、Ajax を使用しないと、発生するたびにページがリロードされることです。私はバックエンド開発者なので、jQuery と Ajax の経験がほとんどないため、この問題にアプローチする方法がわかりません。

どんな助けでも大歓迎です。ありがとう ：）

4

1 に答える 1

1

これを行う方法は、プログレッシブ開発を適用することです-非jsを機能させ、その上で、ajaxまたはその他の必要なクライアントテクノロジーを使用して拡張を行います.

Djangorequestには、プログレッシブ開発に非常に役立つis_ajax( docs ) メソッドがあります。アイデアは、リクエストが非 ajax の場合、以前に行ったことをすべて行いますが、ajax の場合は like カウンターを返して、js がページを更新できるようにするというものです。

def like_page(request):
    if 'id' in request.GET:
        id = request.GET['id']
        car = Cars.objects.get(id=id)
        car.likes += 1
        car.save()

    if not request.is_ajax():
        if 'HTTP_REFERER' in request.META:
            return HttpResponseRedirect(request.META['HTTP_REFERER'])
        else:
            return HttpResponseRedirect('/')
    else:
        data = {
            'likes': car.likes
        }
        json_data = json.dumps(data)
        return HttpResponse(json_data, content_type='application/json')

これはjsonデータを返すことに注意してください。これは、追加情報を返さなければならない場合に備えて、将来簡単に拡張できるため、非常に便利です。

次に、js/jquery について説明します。

テンプレート

<a id="car_like" href="/like/?id={{ car.id }}" >
    # of likes: 
    <span id="car_like_count">{{ car.likes }}</a>
</a>

JS

$(document).ready(function () {
    $('#car_like').click(function(event) {
        event.preventDefault();
        var car_like = $(this),
            url = car_like.attr('href');
        $.getJSON(url, function(data) {
            $('#car_like_count', car_like).html(data.likes);
        });
        return false;
    });
});

これにより、like アンカーのデフォルトの動作が上書きされ、ajax リクエストが送信されます。Ajax リクエストは、車の新しい like カウンターを返し、js が古い番号の代わりに表示します。ただし、何らかの理由で js がサポートされていない場合は、デフォルトのアクションが実行され、同様のアンカーは引き続き機能します。

于 2012-10-15T05:36:40.143 に答える