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
<!DOCTYPE html>
<html>
<head>
<title>欢迎光临 自强学堂！</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="list"> 学习 </div>
<div id='dict'></div>
<script type="text/javascript">
//列表
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 为键值
}
</script>
</body>
</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
<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/oneapp/add/" method="get">
a: <input type="text" id="a" name="a"> <br>
b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>提交</button>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sum").click(function(){
var a = $("#a").val();
var b = $("#b").val();
$.get("/oneapp/add/",{'a':a,'b':b}, function(ret){
$('#result').html(ret)
})
});
});
</script>
</body>
</html>
由于用 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
<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/add/" method="get">
a: <input type="text" id="a" name="a"> <br>
b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>提交</button>
</form>
<div id="dict">Ajax 加载字典</div>
<p id="dict_result"></p>
<div id="list">Ajax 加载列表</div>
<p id="list_result"></p>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 求和 a + b
$("#sum").click(function(){
var a = $("#a").val();
var b = $("#b").val();
$.get("{% url 'add' %}",{'a':a,'b':b}, function(ret){
$('#result').html(ret);
})
});
// 列表 list
$('#list').click(function(){
$.getJSON("{% url '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_dict' %}",function(ret){
//返回值 ret 在这里是一个字典
$('#dict_result').append(ret.a + '<br>');
// 也可以用 ret['twz']
})
})
});
</script>
</body>
</html>
注意：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 为对应的值
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Django与JS交互的示例代码
应用一:有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上,比如要用 js 进行可视化的数据. 请注意:如果是不处理,直接显示在网页上,用Django模板就可以了. 这里讲述两种方法: 一,页面加载完成后,在页面上操作,在页面上通过 ajax 方法得到新的数据(再向服务器发送一次请求)并显示在网页上,这种情况适用于页面不刷新的情况下,动态加载一些内容.比如用户输入一个值或者点击某个地方,动态地把相应内容显示在网页上. 二,直接在视图函数(views.p
-
Android中js和原生交互的示例代码
本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf
-
Django实现简单登录的示例代码
目录 创建django项目 使用模型的url.py 加载静态文件 页面跳转 创建数据库模型 提交 表单提交 ajax提交 创建django项目 创建项目的命令行语句: django-admin startproject newsManage 将templates文件放在模板里面,会显得更简洁一些,所以我就先创建模板啦. 命令行语句:django-admin startapp newsModel 创建好模型把模型名加到setting文件下 INSTALLED_APPS 里面 , 不然到时候会报错说
-
Django+Bootstrap实现计算器的示例代码
目录 准备工作 导入Bootstrap前端框架 编写前端内容 编写视图函数 准备工作 创建一个应用 添加应用到配置 创建一个html 编写视图函数 from django.shortcuts import render # Create your views here. def home(request): return render(request, 'index.html') 配置路由 from django.contrib import admin from django.urls imp
-
Flask框架运用Ajax实现数据交互的示例代码
目录 前后端发送字符串 前后端发送JSON数据 发送数据并携带token 收发JSON格式字符串 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
springboot前后台数据交互的示例代码
本文介绍了springboot前后台数据交互的示例代码,分享给大家,具体如下: 1.在路径中传递数据,比如对某个数据的id:123 前台发送:格式大致如下 在路径中传数据 后台接收: 后台接收数据 后台接收结果 2.查询字符串传递数据前台发送: 前台使用Querystring发送数据 后台接收: 这里@RequestParm可以不写,在后台找不到前台对应的字段时,输出null,在@RequestParam中指定的话输出指定的值(前台没给出字段时): 后台接收queryString方式传递的数
-
Django用户身份验证完成示例代码
在这篇Django文章中,wom 将讨论Django User 验证,Django附带了一个用户认证系统. 它处理用户帐户,组,权限和基于cookie的用户会话. Django身份验证系统同时处理身份验证和授权. 简要地说,身份验证将验证用户是他们声称的身份,而授权则确定允许经过身份验证的用户执行的操作. 基本上,我们将创建登录,注销,忘记密码和重置密码功能. 身份验证支持在django.contrib.auth中为Django contrib模块.默认情况下,所需的配置已包含在django-a
-
django haystack实现全文检索的示例代码
全文检索里的组件简介 1. 什么是haystack? 1. haystack是django的开源搜索框架,该框架支持Solr,Elasticsearch,Whoosh, *Xapian*搜索引擎,不用更改代码,直接切换引擎,减少代码量. 2. 搜索引擎使用Whoosh,这是一个由纯Python实现的全文搜索引擎, 没有二进制文件等,比较小巧,配置比较简单,当然性能自然略低. 3. 中文分词Jieba,由于Whoosh自带的是英文分词,对中文的分词支持不是太好,故用jieba替换whoosh的分词
-
Django实现翻页的示例代码
Django提供了翻页器.用Django的Paginator类实现 一.views模块导入Paginator类实现数据分页 ApiTest/apiviews.py 每行都加了注释,希望有助于理解. from django.shortcuts import render from ApiTest.models import ApiTest from django.contrib.auth.decorators import login_required from django.core.pagin
-
django 发送手机验证码的示例代码
一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商向该手机号,发送该验证码,如果没通过验证,则返回错误信息 3.用户收到短信验证码以后,再次将所有信息post到后台. 4.后台验证各个数据,通过验证则完成实名制认证,如果没通过则返回错误信息. 总结,一次实名验证,需要两次ajax+post 二.对接短信商: 1.在云片网端: 1.注册云片网 地址: