Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks

Using Django templates with jQuery AJAX

2009 January 6
by Nizam

I recently discovered a neat way of displaying data retrieved using jquery AJAX in concert with Django’s template engine. You can create a view in Django which simply uses the render_to_response shortcut function to render the results server-side and then just use jquery.load to dynamically fetch the results.

Eventhough, returning some raw JSON data is much more efficient as far as bandwidth is concerned, method is a lot simpler.

I have been using jquery for over a year now. I have found that its built-in DOM manipulation features are a bit limited, especially for manipulating tables (e.g., adding rows dynamically). This method is much cleaner than doing all that DOM manipulation.

Here is all the jQuery code to handle the search and AJAX spinner display:

01.$( document ).ready( function() {
02.    $( '#searchSubmit' ).click( function() {
03.        q = $( '#q' ).val();
04.        $( '#results' ).html( ' ' ).load(
05.                    '{% url demo_user_search %}?q=' + q );
06.    });
07.});
08. 
09.$( document ).ajaxStart( function() {
10.    $( '#spinner' ).show();
11.}).ajaxStop( function() {
12.    $( '#spinner' ).hide();
13.});

Here is the Django view function that does the heavy lifting on the server-side:

01.def ajax_user_search( request ):
02.    if request.is_ajax():
03.        q = request.GET.get( 'q' )
04.        if q is not None:
05.            results = User.objects.filter(
06.                Q( first_name__contains = q ) |
07.                Q( last_name__contains = q ) |
08.                Q( username__contains = q ) ).order_by( 'username' )
09. 
10.            template = 'results.html'
11.            data = {
12.                'results': results,
13.            }
14.            return render_to_response( template, data,
15.                context_instance = RequestContext( request ) )

Here are some screenshots of the results:

AJAX operation in progress

AJAX operation in progress

Returned results

Returned results

No results

No results

The sample Django project is included for your perusal and is released under the MIT license. I used the excellent Aptana Studio IDE when working on this demo so it can be imported straight into it as an Aptana project.

Download ajax_user_list.zip

posted on 2009-09-24 08:51 seal 阅读(2129) 评论(0)  编辑  收藏 所属分类: Python

只有注册用户登录后才能发表评论。


网站导航: