1

表示された多くのウィンドウの 1 つをクリックしてItem、彼の説明 (単一アイテムの説明) を表示してください。

DjangoでAjaxとjQueryを使用してこれを作成する方法は?

モデル：

class Item(models.Model):
    name = models.CharField(max_length=50)
    slug = models.SlugField()
    price = models.DecimalField(max_digits=5, decimal_places=2)
    desc = models.TextField()

ビュー:

def item_list(request):
    items = Item.objects.all()[:6]
    return render_to_response('items.html', {'items':items}, context_instance=RequestContext(request))


def single_item(request, slug):
    item = Item.objects.get(slug=slug)
    return render_to_response('single.html', {'item':item}, context_instance=RequestContext(request))

テンプレート：

<!-- Single item description: -->

<div id="description">
    <img src="/site_media/images/photo.png">
        <div id="item_description">
            <input name="add" type="button" id="add" value="Add to Cart">
                <p class="title">Single Item name</p>
                <p class="description"><span>Description:</span>
                    This is single item description
                </p>
            </div>
        </div>

<!-- All item: -->

            <div id="item">
                {% for i in items %}
                    <div class="item">
                    <img src="/{{ i.image.url }}"  />
                    <p>
                    <span> {{ i.name }} </span>
                    <span> {{i.price}} </span>
                    </p>
                    </div>
                {% endfor %}
            </div>
        </div>

    </div>
4

1 に答える 1

2

ajax を使用してページを更新する場合は、次の 3 つのことを行う必要があります。

  • ajax 呼び出し用に urls.py にエントリを追加します (または、リクエストが ajax の場合は、ビュー関数に条件を追加してリクエストを処理します)。
  • javascript ブロックを追加して ajax 呼び出しを行い、新しいデータで html/text を更新します。
  • views.py にコードを追加して、ajax 呼び出しを処理し、json データで応答します。

urls.py ...

url(r'/ajax-view-single/)/$', 'ajax_single_item', name='app_name_ajax_single_item'),

html/js

<script type="text/javascript" src="/js/json2.js"></script>
$("#view-single-item").click(function () {
        try {
            // get slug from html
            var slug = "";
            var data = {
                slug: slug
            };
            $.get('{% url app_name_ajax_single_item %}', data, function(data){

               // your data returned from django is in data
               alert(data.item_name);

            }, 'json');
            //$('#error').hide();
        }
        catch(err) {
            $('#error').html(err);
            $('#error').show();
        }
        return false;
    });

ビュー.py

from django.http import HttpResponse
from django.utils import simplejson
from django.shortcuts import get_object_or_404

def ajax_single_item(request):
    '''gets single item'''
    if not request.is_ajax():
        return HttpResponse(simplejson.dumps({'result': False}))

    # get slug from data
    slug = request.GET.get('slug', None)

    # get item from slug
    item = get_object_or_404(Item, slug=slug)
    return HttpResponse(simplejson.dumps({
        'result': True,
        'item_name': item.name,
        'item_price': item.price,
        'item_desc': item.desc,
        'item_slug': item.slug
    }))
于 2012-10-08T22:09:32.467 に答える