1.編輯 try_reqwest.html
我們增加一個 sendData 方法筒愚,用于向后端發(fā)送數(shù)據(jù):
<!DOCTYPE html>
<!-- 靜態(tài)文件標簽 -->
{% load staticfiles %}
<html>
<head>
<title>try_reqwest</title>
<script type="text/javascript" src="{% static "js/reqwest.js" %}"></script>
</head>
<!-- verbatim 標簽,表示該標簽內(nèi)的內(nèi)容不是用django渲染 -->
{% verbatim %}
<body>
<script type="text/javascript">
var bookList = {};
// 從api獲取數(shù)據(jù)
reqwest({
url:'http://127.0.0.1:8000/api/book/', // 請求的url
type:"json", // 請求的格式:json
method:"get", // 請求的方法:get
// 請求成功后執(zhí)行的方法恢总,這里保存在bookList中
success:function (resp) {
bookList = resp
}
});
var new_bookList = {};
// post方法,向后端發(fā)生數(shù)據(jù)睬愤,用于添加數(shù)據(jù)
var sendData = function(){
reqwest({
url:'http://127.0.0.1:8000/api/book/', // 請求的url
type:"json", // 請求的格式:json
method:"post", // 請求的方法:post
// 要發(fā)送的數(shù)據(jù)
data: {
title: '書本1',
author: '作者1',
summary: '簡介1'
},
success:function (resp) {
new_bookList = resp
}
})
}
</script>
</body>
{% endverbatim %}
</html>
2.編輯 api.py
數(shù)據(jù)傳到后端后片仿,需要在后端處理并保存數(shù)據(jù):
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 # 狀態(tài)碼模塊
class BookSerializer(serializers.ModelSerializer):
# 定義個字段的格式,這里限制 title 至少要有一個字符
title = serializers.CharField(min_length=1)
class Meta:
model = Book
fields = '__all__'
# 因為發(fā)生數(shù)據(jù)使用 post 方法尤辱,這里要帶上 'POST'
@api_view(['GET', 'POST'])
def book(request):
# 請求為 'get' 時候砂豌,獲取數(shù)據(jù)庫中的數(shù)據(jù)
if request.method == 'GET':
book_list = Book.objects.all()
serializer = BookSerializer(book_list, many=True)
return Response(serializer.data)
# 請求為 'post' 的時候,獲取來自前端輸入的數(shù)據(jù)
elif request.method == 'POST':
serializer = BookSerializer(data=request.data)
# 檢查數(shù)據(jù)是否通過校驗
if serializer.is_valid():
# 如通過校驗光督,存儲到數(shù)據(jù)庫
serializer.save()
# 返回 201 狀態(tài)碼
return Response(serializer.data, status=status.HTTP_201_CREATED)
# 自定義的錯誤信息
body = {
'body': serializer.errors, # 錯誤信息
'msg': 40001 # 狀態(tài)碼
}
# 返回 400 狀態(tài)碼
return Response(body, status=status.HTTP_400_BAD_REQUEST)
3.測試
在控制臺輸入 sendData() 執(zhí)行該方法:
打開 admin阳距,可以看到添加了剛才寫的新書目:
再看儲存剛才發(fā)送的數(shù)據(jù)的 new_bookList:
剛才我們定義了 title 的長度至少為1,我們嘗試把 title 的內(nèi)容刪去结借,發(fā)生一個空字段:
可以看到發(fā)生不成功筐摘。
還能看到我們自定義的錯誤碼: