改变真正的状态码
RESTful接口本质上需要修改http报头中的状态码，而不是仅仅在data字典中传入状态码。
我们之前在Jsonresponse的请求中可以设置状态码参数，这个参数是真实改变http响应报头中的状态码：
views：
data = {
'status': 201,
'mag': 'add success',
'data': book.to_dict()
}
return JsonResponse(data=data, status=201)帮助：以后在过滤时，直接通过JSONRESPONSE来根据状态码过滤
注意：当在jsonresponse中status为204时，返回到前端的内容是无结果。如下：
views:
elif request.method == 'DELETE':
book_obj = Book.objects.get(pk=bookid)
book_obj.delete()
data = {
'msg': 'delete success',
'status': 204,
'data': {}
}
return JsonResponse(data=data, status=204)当我们使用204时：
可以看到返回的response全部被过滤掉，所以一般企业开发中直接在response使用204还是比较少的，因为对于前端不太友好。
将json数据加载进页面
将书籍加载到页面中
因为restful使用api，所以使用ajax请求来实现该功能。
新建static文件夹，存放页面，并且在settings中注册。
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]导入jquery文件
BookList.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BookList</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript">
/**
$(function(){// 页面加载完成，加载书籍
$.getJSON("/api/books/",function(data){
console.log(data);
})
})
**/
$(function (){//点击按钮加载书籍
$('button').click(function(){
$.getJSON("/api/books/", function(data){
console.log(data);
})
})
})
</script>
</head>
<body>
<div id="container">
<button>ClickToLoad</button>
<ul>
</ul>
</div>
</body>
</html>测试:访问该网页
可以看到已经成功传输json数据到客户端中。
现在要将数据呈现在网页中
BookList.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BookList</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript">
/**
$(function(){// 页面加载完成，加载书籍
$.getJSON("/api/books/",function(data){
console.log(data);
})
})
**/
$(function (){//点击按钮加载书籍
$('button').click(function(){
$.getJSON("/api/books/", function(data){
console.log(data);
if(data['status']===200){
var $ul = $('ul');
var books =data['data'];
for(var i=0; i<books.length;i++){
var $li = $("<li></li>");
$li.html(books[i]['b_name']);
$li.appendTo($ul);
}
}
})
})
})
</script>
</head>
<body>
<div id="container">
<button>ClickToLoad</button>
<ul>
</ul>
</div>
</body>
</html>测试：
整理views文件结构
views函数中关于处理书籍的一个函数已经有七十多行，后续views文件的代码量会非常巨大，不利于我们维护和查看，所以我们可以将views.py转化成一个包，将每一类的函数单独存放到各自的文件中。
操作：
- 右击views.py，选择下图中的convert to python package,将其转化成包
- 转化成包后，新建BookAPI.py将之前关于Book的函数放入。
- 在包中的__init__.py中导入BookAPI.py的函数名（否则urls.py找不到views下的book函数名）
- 测试
可以看到转化成包之后仍然可以正常访问。
优势
现在我们要添加功能，利用用户模块，只需要在views包中新建一个新的py文件。
- 可以让结构变得清晰
- 让views变成可插拔式
同理models也可以转化成包，将不同类型的models差分开，便于存储。
利用ajax在页面添加书籍
新建BookCreate.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BookCreate</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript">
$(function (){
$("button").click(function (){
var b_name = $("#b_name").val();
var b_price = $("#b_price").val();
$.post('/api/books/', {"b_name":b_name, 'b_price':b_price}, function (data){
console.log(data);
})
})
})
</script>
</head>
<body>
<div id="container">
<form action="#">
<span>BookName:</span><input type="text" id="b_name" placeholder="please input your book name">
<br>
<span>BookPrice</span><input type="text" id="b_price" placeholder="please input your book price">
</form>
<button>Create</button>
</div>
</body>
</html>测试：
现在增加功能：添加完书籍跳转到查询页面
<script type="text/javascript">
$(function (){
$("button").click(function (){
var b_name = $("#b_name").val();
var b_price = $("#b_price").val();
$.post('/api/books/', {"b_name":b_name, 'b_price':b_price}, function (data){
console.log(data);
if (data['status']===201){
window.open('/static/html/BookList.html', target="_self")
}
})
})
})
</script>测试：添加完书籍之后完成跳转
此处评论已关闭