您的位置：首页 > Web前端 > JavaScript

Django:之传递数据给JS、Ajax和Ajax CSRF认证

2016-04-12 23:31 525 查看
Django传递数据给JS

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

请注意：如果是不处理，直接显示在网页上，用Django模版就可以了，请看前面的教程。

这里讲述两种方法：

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

这种请详见下面Django Ajax一节的内容。

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

views.py

from __future__ import unicode_literals
from django.shortcuts import render

def home(request):
List = ['吴老二博客', '渲染Json到模板']
return render(request, 'home.html', {'List': List})


home.html中的一部分

<script type="text/javascript">
var List = {{ List }};
alert(List);
</script>


需要注意的是，我们如果直接这么做，传递到js的时候，网页的内容会被转义得到的格式会报错。访问时会得到Uncaught SyntaxError: Unexpected token ILLEGAL

需要注意两点：

1、views.py中返回的函数中的值要用json.dumps()处理

2、在网页上要加一个safe过滤器。

views.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只给出了js核心部分：

//列表
var List = {{ List|safe }};
//字典
var Dict = {{ Dict|safe }};


如果你对js比较熟悉，至此为止，下面的不用于看了，如果不太熟悉，可以参考下面的更详细的代码。

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>


完整代码下载：json.zip（基于Django 1.8，注意settings.py文件和低版本可能不兼容，其它部分相同）　　

Django Ajax

有时候我们需要在不刷新的情况下载入一些内容，在网页的基本知识中我们介绍了ajax技术。

在本文中讲解如何用Django来实现不刷新网页的情况下加载一些内容。

由于用jQuery实现ajax比较简单，所以我们用jQuery库来实现，想用原生的javascript的同学可以参考：ajax教程，下面也有例子提供下载。

本节有多个实例提供下载，通过看代码可以更快的学习。

第一节，源代码下载：ajax.zip

这里用Django表单第一节中的一个例子，我们要实现的是在不刷新的情况下显示计算结果到页面上。修改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>

<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("/add/",{'a':a,'b':b}, function(ret){
$('#result').html(ret)
})
});
});
</script>
</body>
</html>


在原来的基础上，在一些元素上加了id，以便于获取值和绑定数据，然后我们用了jQuery.get()方法，并用$(selector).html()方法将结果显示在页面上，如下图：

备注：关于请求头和request.is_ajax()方法使用

views.py中可以用request.is_ajax()方法判断是否是ajax请求，需要添加一个HTTP请求头：原生javascript:

xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");


用jQuery:

用 $.ajax 方法代替 $.get，因为 $.get 在 IE 中不会发送 ajax header


服务器端会将请求头的值全部大写，中划线改成下划线，并在非标准的头前面加上HTTP_,这个过程可以认为相当于以下Python代码：

STANDARD_HEADERS = ['REFER', 'HOST', ...] # just for example

def handle_header(value):
value = value.replace('-', '_').upper()

if value in STANDARD_HEADERS:
return value

return 'HTTP_' + value


判断ajax方法，以及原生的javascript实现ajax的示例下载：views_ajax.zip

第二节，源代码下载：ajax_ist_dict.zip

更富在的例子，传递一个数组或字典到网页，由JS处理，再显示出来。

views.py

from django.http import HttpResponse
import json

def ajax_list(request):
a = range(100)
return HttpResponse(json.dumps(a), content_type='application/json')

def ajax_dict(request):
name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
return HttpResponse(json.dumps(name_dict), content_type='application/json')


Django 1.7及以后到版本有更简单的方法(使用JsonResponse(官方文档))：

from django.http import JsonResponse

def ajax_list(request):
a = range(100)
return JsonResponse(a, safe=False)

def ajax_dict(request):
name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
return JsonResponse(name_dict)


在django 1.6及以前的旧版本中可以自己写一个JsonResponse方法，如下：

from django.http import HttpResponse

import json

class JsonResponse(HttpResponse):
def __init__(self,
content={},
mimetype=None,
status=None,
content_type='application/json'):

super(JsonResponse, self).__init__(
json.dumps(content),
mimetype=mimetype,
status=status,
content_type=content_type)


写好厚，我们在urls.py中添加以下两行：

url(r'^ajax_list/$', 'tools.views.ajax_list', name='ajax-list'),
url(r'^ajax_dict/$', 'tools.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("/add/",{'a':a,'b':b}, function(ret){
$('#result').html(ret);
})
});

// 列表 list
$('#list').click(function(){
$.getJSON('/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('/ajax_dict/',function(ret){
//返回值 ret 在这里是一个字典
$('#dict_result').append(ret.twz + '<br>');
// 也可以用 ret['twz']
})
})
});
</script>
</body>
</html>


技能提升：getJSON中写的对应网址，用urls.py中的name来获取是一个更好的方法！

标签：{% url 'name' %}

<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.twz + '<br>');
// 也可以用 ret['twz']
})
})
});
</script>


这样做最大的好处就是在修改urls.py中的网址后，不用改模版中对应的网址。

补充：如果是一个复杂的列表 或 字典，因为比如如下信息：

person_info_dict = [
{"name":"laowu", "age":20},
{"name":"wulaoer", "age":24},
{"name":"laoer", "age":33},
]


这样我们遍历列表的时候，每次遍历得到一个字典，再用字典的方法去处理，当然有更简单的遍历方法：用$.each()方法代替for循环，html代码(jQuery)

$.getJSON('ajax-url-to-json', function(ret) {
$.each(ret, function(i,item){
// i 为索引，item为遍历值
});
});


最后，附上一个返回图片并显示的ajax实例：

Django Ajax CSRF认证

CSRF(Cross-site request forgery)跨站请求伪造，也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同，并且攻击方式几乎相左。XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行(因此对其进行防范对资源也相当稀少)和难以防范，所以被认为比XSS更具危险性。

Django中自带来防止CSRF攻击的功能，但是一些新手不知道如何使用，给自己编程带来了麻烦。常常会出现下面Django csrf token missing or incorrect的错误。

GET请求不需要CSRF认证，POST请求需要正确认证才能得到正确的返回结果。一般在POST表单中加入{% csrf_token %}

<form method="POST" action="/post-url/">
{% csrf_token %}

<input name='zqxt' value="吴老二博客Django技术">
</form>


如果使用Ajax调用的时候，就要麻烦一些。需要注意一下几点：

1、在视图中使用render(而不要使用render_to_response)

2、使用jQuery的ajax或者post之前加入这个js代码：

jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});


或者更为优雅简洁的代码(不能写在.js 中，要直接写在模版文件中)：

$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});


这样之后，就可以像原来一样的使用jQuery.ajax()和jQuery.post()了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航