0

私は、各ビデオの横に小さな星が表示されるメディアサーバーに取り組んでいます。JQuery イベント ハンドラーがボタンにアタッチされているため、ボタンをクリックすると、サーバーのお気に入りページへの AJAX POST 要求が発生し、お気に入りに追加するビデオの一意の ID が送信されます。次に、JQuery は画像を切り替えます (お気に入りに設定されていない場合、クリックすると星が「光り」、お気に入りに設定されている場合、クリックすると星が再び透明になります)。

ユーザーがログインしていない場合、明らかに動画をお気に入りに登録できません。ユーザーがお気に入りボタンをクリックすると、ログインページにリダイレクトされるようにします。ただし、AJAX 応答は、認証されていないユーザーがお気に入りボタンをクリックすると、お気に入りボタンの画像が切り替わることを意味しますが、これは起こるべきではありません。問題は、JQuery 関数をショートサーキットし、ユーザーのログイン ステータスに基づいてトグルを防止する方法がわからないことです。

以下は私のお気に入りページで、POST リクエストが送信されます。

@login_required
def favorite(request):
    if request.POST.has_key('id'):
        id = request.POST['id']
        id = id.rsplit('_')
        id = int(id[1])
        m = Media.objects.get(pk=id)
        m.favorited_by.add(request.user.get_profile())
        m.save()
    if request.META.has_key('HTTP_REFERRER'):
        return HttpResponseRedirect(request.META['HTTP_REFERRER'])
    return HttpResponseRedirect('/')

そしてJQuery

var imgSRC={'src1':'/static/images/star_off.png','src2':'/static/images/star_on.png'};
$('.favorites').live('click', function() {
    var img=$(this);
    id=$(this).parent().parent().attr('id');
    console.log(id);
    $.post('/favorite/', {"id": id}, function(data) {
        img.attr('src', imgSRC.src2);
        img.attr('class', 'favorites_on');
    });
});

編集：

JavaScriptをdjangoテンプレートに埋め込むのではなく、JavaScriptを独自のファイルに残すことをお勧めします。そのため、テンプレート タグをユーザー認証に使用することはできません。私が考えた1つの解決策は、ユーザーがログインしたときにのみ存在する一意のdivレイヤーを検索することでした（ユーザーの名前はログイン後にヘッダーの右上に表示されます）が、それでもこれを行うという私の問題は解決しません適切に、スクリプトをテンプレートから分離したままにします。

4

1 に答える 1

4

私はis_authenticatedあなたのテンプレートでメソッドを利用します：

$('.favorites').live('click', function() {
    {% if request.user.is_authenticated %}
       //user is logged in, let's go!
       var img=$(this);
       id=$(this).parent().parent().attr('id');
       console.log(id);
       $.post('/favorite/', {"id": id}, function(data) {
           img.attr('src', imgSRC.src2);
           img.attr('class', 'favorites_on');
       });
    {% else %}
       //not logged in, redirect to login page!
       window.location = "{% url your_login_url %}"; //what you named your login url in urls.py
    {% endif %}
});

アップデート

次のように、ユーザーのステータスを外部 JS ファイルに送信できます。

<!-- end of body -->
<script>
USER_STATUS = {{ request.user.is_authenticated }}; //normally true/false
LOGIN_URL = '{% url your_login_url %}'; //what you named your login url in urls.py
</script>

JS ファイルの上に次の行を追加します。

USER_STATUS = '';
LOGIN_URL = ''; // You'll never know when it changes ;)

それから

$('.favorites').live('click', function() {
    if(USER_STATUS==true){
       //user is logged in, let's go!
       var img=$(this);
       id=$(this).parent().parent().attr('id');
       console.log(id);
       $.post('/favorite/', {"id": id}, function(data) {
           img.attr('src', imgSRC.src2);
           img.attr('class', 'favorites_on');
       });
    } else {
       //not logged in, redirect to login page!
       window.location = LOGIN_URL; 
    }
});

私はJavaScriptの部分をテストしましたが、djangoはありません。しかし、私はそれがあなたを始めると思います。

更新 2

私は私の中でこれを使用しました<script>

{% if request.user.is_authenticated %} USER_STATUS = 'true';{% else %} USER_STATUS =  'false';{% endif %}
 alert(USER_STATUS);

と警告しtrueました。

于 2013-06-20T21:51:02.120 に答える