【下载文档:  Django与JS交互的示例代码.txt 】

---

Django与JS交互的示例代码
应用一：有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。
请注意：如果是不处理，直接显示在网页上，用Django模板就可以了。
这里讲述两种方法：
一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。
二，直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上（一次性地渲染，还是同一次请求）。
需要注意两点：1、views.py中返回的函数中的值要用 json.dumps()处理 2、在网页上要加一个 safe 过滤器
view.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.shortcuts import render
def home(request):
List = ['自强学堂', '渲染Json到模板']
Dict = {'site': '自强学堂', 'author': '涂伟忠'}
return render(request, 'home.html', {
'List': json.dumps(List),
'Dict': json.dumps(Dict)
})
home.html












应用二：不刷新网页的情况下，加载一些内容
view.py
#coding:utf-8
from __future__ import unicode_literals
from django.shortcuts import render
from django.http import HttpResponse
def get(request):
return render(request, 'oneapp/get.html')
def add(request):
a = request.GET.get('a', 0)
b = request.GET.get('b', 0)
c = int(a) + int(b)
return HttpResponse(str(c))
urls.py
from django.conf.urls import url, include
from django.contrib import admin
from OneApp import views as oneapp_views
urlpatterns = [
url(r'^admin/', admin.site.urls),
#url(r'^$', oneapp_views.index),
url(r'^oneapp/index/', oneapp_views.index, name='index'),
url(r'^oneapp/home/', oneapp_views.home, name='home'),
url(r'^oneapp/get/', oneapp_views.get, name='get'),
url(r'^oneapp/add/', oneapp_views.add, name='add'),
]
get.html

请输入两个数字

a:

b:

result:

提交

由于用 jQuery 实现 ajax 比较简单，所以我们用 jQuery库来实现.。
用了jQuery.get() 方法，并用 $(selector).html() 方法将结果显示在页面上，如下图：
应用三：传递数字或者字典到网页，由JS处理，再显示出来
首先定义接口和URL
views.py
#coding:utf-8
from __future__ import unicode_literals
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
import json
# Create your views here.
def ajax_list(request):
a = range(100)
#return HttpResponse(json.dump(a), content_type='application/json')
return JsonResponse(a, safe=False)
def ajax_dict(request):
name_dict = {'a': 1, 'b': 2}
#return HttpResponse(json.dump(name_dict), content_type='application/json')
return JsonResponse(name_dict)
urls.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
#url(r'^$', oneapp_views.index),
url(r'^oneapp/index/', oneapp_views.index, name='index'),
url(r'^oneapp/home/', oneapp_views.home, name='home'),
url(r'^oneapp/get/', oneapp_views.get, name='get'),
url(r'^oneapp/add/', oneapp_views.add, name='add'),
url(r'^oneapp/ajax_list/', oneapp_views.ajax_list, name='ajax_list'),
url(r'^oneapp/ajax_dict/', oneapp_views.ajax_dict, name='ajax_dict'),
]
然后就是在无刷新的情况下，把内容加载到页面了。
index.html

请输入两个数字

a:

b:

result:

提交

注意：getJSON中的写的对应网址，用 urls.py 中的 name 来获取是一个更好的方法!标签：{% url 'name' %}
这样做最大的好处就是在修改 urls.py 中的网址后，不用改模板中对应的网址。
如果是一个复杂的字典或者列表，如：
person_info_dict = [
{"name":"xiaoming", "age":20},
{"name":"tuweizhong", "age":24},
{"name":"xiaoli", "age":33},
]
这样我们遍历列表的时候，每次遍历得到一个字典，再用字典的方法去处理，当然有更简单的遍历方法：
用 $.each() 方法代替 for 循环，html 代码（jquery)
$.getJSON('ajax_url_to_json', function(ret) {
$.each(ret, function(i,item){
// i 为索引，item为遍历值
});
});
补充：如果 ret 是一个字典，$.each 的参数有所不同，详见：http://api.jquery.com/jquery.each/
$.getJSON('ajax-get-a-dict', function(ret) {
$.each(ret, function(key, value){
// key 为字典的 key，value 为对应的值
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。