django前后端分离信息交互例子

django前后端分离信息交互例子

  • 1. 序列化和反序列化
  • 2. json模块
  • 3. 前端使用ajax传递数据到后端
  • 4. 后端接收数据并储存到数据库

1. 序列化和反序列化

将模型数据转换成json数据-----序列化
将接收的json数据转换成模型-----反序列化

2. json模块

json模块里最常用的就是json.dumps() 和json.loads()。

json.dumps()函数是将python数据类型转换成json数据格式(字典转字符串)。
json.loads()函数是将json数据格式转换成python数据类型(字符串转字典) 。

3. 前端使用ajax传递数据到后端


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <script src='jquery-1.12.4.min.js'>script>
    <script>
        $(document).ready(function () {
            $('#btn').click(function () {
               var data = {
                   'name': '马冬梅',
                   'price': 88,
               };
               data = JSON.stringify(data);
               $.ajax({
                   url:'http://127.0.0.1:8000/app01/userinfo/',
                   type:'POST',
                   data:data,

                   success: function (data) {
                       alert('ok');
                       console.log(data)
                       console.log(typeof(data))
                   }
               })
            });
        })
    script>
head>
<body>

<button id="btn">提交数据button>

body>
html>

其中:ajax的success方法是一个回调函数,可以接收后端发来的数据,不过接收到的数据类型为object

4. 后端接收数据并储存到数据库

views.py文件内容:
因为ajax是POST请求,所以下面的真正的起作用的是post方法里面的内容。

class UserInfos(View):
    def get(self, request):
        book_list = Book.objects.all()
        print(book_list)
        data_list = []
        for bookobj in book_list:
            newdict = {
                'id': bookobj.id,
                'name': bookobj.name,
                'price': bookobj.price
            }
            data_list.append(newdict)
         # 第一个参数默认dict
         # 第二个参数设置为False ,表示可以直接传送json
         # 第三个参数是改成中文编码
        return JsonResponse(data_list, safe=False, json_dumps_params={'ensure_ascii': False})
        

    def post(self,request):
        print(request.body)
        data_byte = request.body  # 获取到前端传递过来的ajax数据
        data_str = data_byte.decode()  # 将传递过来的ajax的byte类型的数据转成str字符串
        data_json = json.loads(data_str)  # 转成字典类型
        print('------------------------->',data_json)
        data_name = data_json.get('name')
        data_price = data_json.get('price')
        
        res = Book.objects.filter(name=data_name)  # 在数据库查看这个数据是否已经存在
        
        if not res: 
            Book.objects.create(name=data_name,price=data_price)  # 不存在就往数据库添加数据
        data = {'a':1}
        return JsonResponse(data)  # 把{'a':1}数据返回个前端

在urls.py文件的内容:

from django.conf.urls import url
from app01 import views

urlpatterns = [
    url(r'^userinfo/',views.UserInfos.as_view()),
]

你可能感兴趣的:(django)