Django與Ajax和jQuery

Question

我想單擊其中一個Item顯示一個窗口與他的描述（單項描述）。

如何使用Ajax和jQuery與Django創建？

型號：

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> 

Answer 1

如果你想使用Ajax刷新頁面，你需要做三件事：

• 爲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; 
    }); 

views.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 
    }))