1.编辑 try_reqwest.html
我们增加一个 sendData 方法，用于向后端发送数据：
<!DOCTYPE html>
<!-- 静态文件标签 -->
{% load staticfiles %}
<html>
<head>
<title>try_reqwest</title>
<script type="text/javascript" src="{% static "js/reqwest.js" %}"></script>
</head>
<!-- verbatim 标签，表示该标签内的内容不是用django渲染 -->
{% verbatim %}
<body>
<script type="text/javascript">
var bookList = {};
// 从api获取数据
reqwest({
url:'http://127.0.0.1:8000/api/book/', // 请求的url
type:"json", // 请求的格式：json
method:"get", // 请求的方法：get
// 请求成功后执行的方法，这里保存在bookList中
success:function (resp) {
bookList = resp
}
});
var new_bookList = {};
// post方法，向后端发生数据，用于添加数据
var sendData = function(){
reqwest({
url:'http://127.0.0.1:8000/api/book/', // 请求的url
type:"json", // 请求的格式：json
method:"post", // 请求的方法：post
// 要发送的数据
data: {
title: '书本1',
author: '作者1',
summary: '简介1'
},
success:function (resp) {
new_bookList = resp
}
})
}
</script>
</body>
{% endverbatim %}
</html>
2.编辑 api.py
数据传到后端后，需要在后端处理并保存数据：
from library.models import Book
from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status # 状态码模块
class BookSerializer(serializers.ModelSerializer):
# 定义个字段的格式，这里限制 title 至少要有一个字符
title = serializers.CharField(min_length=1)
class Meta:
model = Book
fields = '__all__'
# 因为发生数据使用 post 方法，这里要带上 'POST'
@api_view(['GET', 'POST'])
def book(request):
# 请求为 'get' 时候，获取数据库中的数据
if request.method == 'GET':
book_list = Book.objects.all()
serializer = BookSerializer(book_list, many=True)
return Response(serializer.data)
# 请求为 'post' 的时候，获取来自前端输入的数据
elif request.method == 'POST':
serializer = BookSerializer(data=request.data)
# 检查数据是否通过校验
if serializer.is_valid():
# 如通过校验，存储到数据库
serializer.save()
# 返回 201 状态码
return Response(serializer.data, status=status.HTTP_201_CREATED)
# 自定义的错误信息
body = {
'body': serializer.errors, # 错误信息
'msg': 40001 # 状态码
}
# 返回 400 状态码
return Response(body, status=status.HTTP_400_BAD_REQUEST)
3.测试
在控制台输入 sendData() 执行该方法：
打开 admin，可以看到添加了刚才写的新书目：
再看储存刚才发送的数据的 new_bookList：
刚才我们定义了 title 的长度至少为1，我们尝试把 title 的内容删去，发生一个空字段：
可以看到发生不成功。
还能看到我们自定义的错误码：
