django ajax 简书,Django高级（二）：JavaScript Ajax

有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。

方法一：视图函数渲染

直接在视图函数(views.py中的函数)中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上(一次性地渲染，还是同一次请求)。

# ajax_test/urls.py

url(r'^home/$',views.home,name='ajax_test_home'),

#ajax_text/views.py

#coding:utf-8

from django.shortcuts import render

import json

# Create your views here.

def home(request):

#List = ['My Djano', '渲染Json到模板']

List = ['My Djano', 'Json']

Dict = {'site': 'NGS_TEST', 'author': '苏亚男'}

return render(request, 'ajax_test/home.html',

{'List': json.dumps(List),'Dict':json.dumps(Dict)})

# ajax_test/templates/ajax_test/home.html

{% extends 'learn/base.html' %}

{% block title %}欢迎光临ajax_test首页{% endblock %}

{% block content %}

这里是首页，欢迎光临!

学习

//列表

var List = {{ List|safe }};

//下面的代码把List的每一部分放到头部和尾部

$('#list').prepend(List[0]);

$('#list').append(List[1]);

console.log('--- 遍历 List 方法 1 ---')

for(i in List){

console.log(i);// i为索引

}

console.log('--- 遍历 List 方法 2 ---')

for (var i = List.length - 1; i >= 0; i--) {

// 鼠标右键，审核元素，选择 console 可以看到输入的值。

console.log(List[i]);

};

console.log('--- 同时遍历索引和内容，使用 jQuery.each() 方法 ---')

$.each(List, function(index, item){

console.log(index);

console.log(item);

});

// 字典

var Dict = {{ Dict|safe }};

console.log("--- 两种字典的取值方式 ---")

console.log(Dict['site']);

console.log(Dict.author);

console.log("--- 遍历字典 ---");

for(i in Dict) {

console.log(i + Dict[i]);//注意，此处 i 为键值

}

{% endblock %}

# learn/templates/learn/base.html

{% block title %}NGS{% endblock %}

注：浏览器调试代码

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

方法二：Ajax再次请求

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据(再向服务器发送一次请求)并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容，比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

用 Django实现不刷新网页的情况下加载一些内容。

由于用 jQuery 实现 ajax 比较简单，所以我们用 jQuery库来实现，也可以用原生的 javascript 实现。这里举例1拓展计算a+b，举例2传递一个数组或字典到网页，由JS处理再显示出来。

Demo1：加载字典和列表，JSON格式传递数据

# ajax_test/urls.py

url(r'^index/$',views.index,name='ajax_test_index'),

url(r'^ajax_list/$', views.ajax_list, name='ajax-list'),

url(r'^ajax_dict/$', views.ajax_dict, name='ajax-dict'),

# ajax_test/views.py

#coding:utf-8

import os

from django.shortcuts import render

from django.http import HttpResponse

import json

from django.http import JsonResponse

from suynblog import settings

# Create your views here.

def index(request):

return render(request, 'ajax_test/index.html')

def ajax_list(request):

a = range(100)

#return HttpResponse(json.dumps(a),content_type='application/json')

return JsonResponse(a, safe=False)

def ajax_dict(request):

name_dict = {'suyn': 'Love python and Django', 'Miss Su': 'I am learning Django'}

#return HttpResponse(json.dumps(name_dictm),content_type='application/json')

return JsonResponse(name_dict)

# ajax_test/templates/ajax_test/index.html

Ajax 加载字典

Ajax 加载列表

$(document).ready(function(){

// 列表 list

$('#list').click(function(){

$.getJSON('{% url 'ajax_test:ajax-list' %}',function(ret){

//返回值 ret 在这里是一个列表

for (var i = ret.length - 1; i >= 0; i--) {

// 把 ret 的每一项显示在网页上

$('#list_result').append(' ' + ret[i])

};

})

})

// 字典 dict

$('#dict').click(function(){

$.getJSON('{% url 'ajax_test:ajax-dict' %}',function(ret){

//返回值 ret 在这里是一个字典

$('#dict_result').append(ret.suyn + '
');

// 也可以用 ret['twz']

})

})

});

Demo2：根据图片名称加载图片，form请求

# ajax_test/urls.py

url(r'^picIndex/$',views.picIndex),

url(r'^get_pic/$', views.get_pic, name='get-pic'),

# ajax_test/views.py

#coding:utf-8

import os

from django.shortcuts import render

from django.http import HttpResponse

import json

from django.http import JsonResponse

from suynblog import settings

# Create your views here.

BASE_DIR = settings.BASE_DIR

print BASE_DIR #/root/suyn_website/suynblog

PICS = os.listdir(os.path.join(BASE_DIR, 'common_static/pics'))

print PICS #['DNA.jpg', 'desktop.jpg']

def picIndex(request):

return render(request, 'ajax_test/pics.html')

def get_pic(request):

color = request.GET.get('color')

number = request.GET.get('number')

name = '{}_{}'.format(color, number)

# 过滤出符合要求的图片，假设是以输入的开头的都返回

result_list = filter(lambda x: x.startswith(name), PICS)

print 'result_list', result_list #result_list ['red_1_2.png', 'red_11.png']

# 去掉pics.html默认的color number的value属性，可以自己输入。result_list ['red_2.jpg']

return HttpResponse(json.dumps(result_list),content_type='application/json')

# ajax_test/templates/ajax_test/pics.html

请输入

color:

number:

result:

提交

$(document).ready(function(){

$("#sum").click(function(){

var color = $("#color").val();

var number = $("#number").val();

$.get("{% url 'ajax_test:get-pic' %}", {'color':color,'number':number}, function(ret){

$('#result').html('') //清空前面的结果

$.each(ret, function(index, item){

$('#result').append('');

})

})

});

});