什么是 JSON ？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言
- JSON 具有自我描述性，更易理解
- JSON 为了实现跨语言传输数据
- 合格的JSON对象
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]
- 不合格的JSON对象
{ name: "张三", 'age': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。
用XML表示中国部分省市数据如下
<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>
用JSON表示如下：
{
"name": "中国",
"province": [{
"name": "黑龙江",
"cities": {
"city": ["哈尔滨", "大庆"]
}
}, {
"name": "广东",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
}, {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["乌鲁木齐"]
}
}]
}
AJAX的介绍
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
1. 登陆示例
# login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<script type="text/javascript" src=''></script>
</head>
<body>
<h1>登陆页面</h1>
<input type="text" name="" id="username" placeholder="用户名">
<input type="text" name="" id="password" placeholder="密码">
<button type="button" id="login">登陆</button>
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript">
$(function () {
$('#login').click(function () {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/check_login/',
type: 'get',
data: {
username: username,
password: password
},
success: function (res) {
alert(res)
}
})
})
})
</script>
</body>
</html>
# views.py
from django.shortcuts import render, redirect, HttpResponse
def login(request):
return render(request, 'login.html')
def check_login(request):
username = request.GET.get('username')
password = request.GET.get('password')
if username == 'Kevin' and password == '123':
res_str = '登陆成功'
else:
res_str = '登陆失败'
return HttpResponse(res_str)
# urls.py
from django.conf.urls import url, include
from app01.views import *
urlpatterns = [
url(r'^login/$', login),
url(r'^check_login/$', check_login),
]
AJAX请求设置csrf_token
注意: csrf_token验证只作用于POST的请求，GET等其他请求Django都会不进行验证，所以POST请求除外的都无需设置csrf_token
1. 方法一
- 通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送
var csrf_token_val = $("[name = 'csrfmiddlewaretoken']").val();
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Q1mi",
"password": 123456,
"csrfmiddlewaretoken": csrf_token_val // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
2. 方法二
- 通过获取返回的cookie中的字符串 放置在请求头中发送
- 使用jquery.cookie.js插件获取cookie
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrf_token，并设置到请求头中
data: {
"username": "Q1mi",
"password": 123456
},
success: function (data) {
console.log(data);
}
})
- 自己编写获取cookie的代码
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;
}
var csrftoken = getCookie('csrftoken');
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": csrftoken}, // 从Cookie取csrf_token，并设置到请求头中
data: {
"username": "Q1mi",
"password": 123456
},
success: function (data) {
console.log(data);
}
})
3. 方法三 -> 官方推荐方法
- 编写一个单独的js文件，用作于在每一次post的请求前，将 csrf_token 添加到请求头中，这样就无需在每一次编写AJAX的POST请求的时候添加请求头了（即: 方法二）
# setupajax.js
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]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); //验证是否是 GET|HEAD|OPTIONS|TRACE ，如果是就无需往请求头中添加csrf_token
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken); // 将 csrf_token 添加到请求头中
}
}
});
# xxx.html
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/setupajax.js' %}"></script>
<script type="text/javascript">
$(function () {
$('#login').click(function () {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/check_login/',
type: 'post',
data: {
username: username,
password: password
},
success: function (res) {
alert(res)
}
})
})
})
</script>
前端发送列表给Django的注意事项
- 注意: 前端发送列表给Django的时候最好先将列表转换为字符串再发送，不然Django是无法接受直接发送过来的列表，js对象也一样
$.ajax({
url: '/check_login/',
type: 'get',
dataType: 'json',
data: {
array: JSON.stringify([1, 2, 3, 4, 5]) # 先将列表转换为字符串，然后再进行发送
},
success: function (res) {
alert(res)
}
})
# views.py
from django.shortcuts import render, redirect, HttpResponse
import json
def check_login(request):
str_array = request.GET.get('array')
print(str_array) # 字符串类型的列表: [1,2,3,4,5]
array = json.loads(str_array)
print(array) # list 类型: [1, 2, 3, 4, 5]
return HttpResponse('xxx')
- traditional: true -> 无需将列表转换为字符串，直接进行发送，但是不能发送多维列表，否则Django所接受到的列表格式是有问题的
$.ajax({
url: '/check_login/',
type: 'get',
traditional: true, # 加上此项
dataType: 'json',
data: {
array: [1, 2, 3, 4, 5],
m_array: [[1, 2], [3, 4]]
},
success: function (res) {
alert(res)
}
})
# views.py
def check_login(request):
# 接受普通列表
array = request.GET.getlist('array')
print(array) # ['1', '2', '3', '4', '5']
# 接受多维列表 -> 有问题
m_array = request.GET.getlist('m_array')
print(m_array) # ['1,2', '3,4']
return HttpResponse('xxx')
App 概念 →