jq ajax 小例子,django jquery ajax 的一个小例子

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 qis 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

Returned 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.