目录

一:前后端传输数据的编码格式(contentType)

1.研究post请求数据的编码格式
  1. # get请求数据的编码格式
  3. get请求数据就是直接放在url后面的
  4. url?username=jason&password=123
2.可以朝后端发送post请求的方式
  1. 1.form表单
  2. 2.Ajax请求
3.前后端传输数据的编码格式
  1. urlencoded
  3. formdata
  5. json
4.研究form表单

  1. form表单默认的数据编码格式是Content-Type: urlencoded
  3. 数据格式: username=123&password=123

5.当form表单编码格式修改为formdata与不修改区别
  1. 1.django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装request.POST中。
  2. username=jason&password=123	>>> request.POST
  4. 2.如果你把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中
  6. 总结:
  7. 1.针对不同的编码格式，Django在后端内自动解析，然后放在不同的方法里面去，让用户非常简单快捷的就能够来操作，WSGI只是做了初步的封装，Django做了二次封装，主要是Django做的。
  9. 2.form表单是没有办法发送json格式数据的
  1. <form action="" method="post" enctype="multipart/form-data">  {# 修改编码格式为form-data #}
  2.     <p>username: <input type="text" name="username" class="form-control"></p>
  3.     <p>password: <input type="password" name="password" class="form-control"></p>
  4.     <p>file: <input type="file" name="file"></p>
  5.     <input type="submit" class="btn btn-success">
  6. </form>

6.研究Ajax默认编码格式
  1. 默认的编码格式也是urlencoded

  1. 数据格式:username=jason&age=20

  1. django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
  2.   	username=jason&age=20	>>> request.POST

二:ajax发送json格式数据

1.Ajax发送json格式数据
  1. 前后端传输数据的时候一定要确保"编码格式"跟数据真正的格式是一致的！
2.编码格式转换成JSON格式

3.发送数据必须与编码格式保持一致

4.django后端不会帮你处理json格式数据需要手动处理
  1. 1.django针对json格式的数据 不会做任何的处理 
  3. 解决方法:
  4. 	Django后端不会帮你处理json格式数据需要自己手动去request.body获取并处理！

5.后端手动处理json格式数据
  1. 以下有两种获取json格式数据方法:
  2. 1.第一种操作比较繁琐,但语句明显
  4. 2.第二种操作比较简洁,但对小白来说比较复杂
  6. request对象方法补充
  7. 	request.is_ajax()
  8. 		判断当前请求是否是ajax请求 返回布尔值
  1. import json
  3. def ab_json(request):
  4.     # 判判断当前请求是否是ajax请求 返回布尔值
  5.     if request.is_ajax():
  6.         # 获取二进制格式字符串
  7.         print(request.body)  #  {"username":"jason","age":25}
  9. # 获取json格式数据方式1:
  10.         # 针对json格式数据需要你自己手动处理
  11.         # 1.接收json二进制格式字符串数据
  12.         json_bytes = request.body
  13.         # 2.将二进制数据解码
  14.         json_str = json_bytes.decode('utf-8')
  15.         # 3.将json格式数据反序列化
  16.         json_dict = json.loads(json_str)
  17.         print(json_dict, type(json_dict))  
  19.         # {'username': 'jason', 'age': 25} <class 'dict'>
  21. # 获取json格式数据方式2:
  22.         以下方法简便为一行
  23.         # 1.json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
  24.         # 针对json格式数据需要你自己手动处理
  25.         # 1.接收json二进制格式字符串数据
  26.         json_bytes = request.body
  27.         # 2.将二进制格式数据自动解码再反序列化
  28.         json_dict = json.loads(json_bytes)
  29.         print(json_dict, type(json_dict))
  31.     return render(request, 'ab_json.html')
  • views
  1. <button class="btn btn-danger" id="d1">点我</button>
  2. <script>
  3.     // 点击事件
  4.     $('#d1').click(function () {
  5.         $.ajax({
  6.             url: '',
  7.             type: 'post',
  8.             // 发送数据需要与编码格式一致 将数据转换成JSON格式数据
  9.             data: JSON.stringify({'username':'jason','age':25}),
  10.             // 指定编码格式 将urlencoded改为json编码格式
  11.             contentType: 'application/json',
  12.             success:function () {
  14.             }
  15.         })
  16.     })
  17. </script>

6.ajax发送json格式数据需要注意点
  1. 1.contentType参数指定成:application/json
  2. 2.数据是真正的json格式数据
  3. 3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理

三:ajax发送文件

1.Ajax发送文件关键字
  1. Ajax发送文件需要借助于js内置对象FormData
2.Ajax发送文件操作
  1. <p>username: <input type="text" id="d1"> </p>
  2. <p>password: <input type="text" id="d2"> </p>
  3. <p><input type="file" id="d3"> </p>
  4. <button class="btn btn-info" id="d4"></button>
  6. <script>
  7.     // 点击按钮朝后端发送普通键值对和文件数据
  8.     $('#d4').on('click', function () {
  9.         // 1.需要先利用FormData内置对象
  10.         let formDateObj = new FormData();
  11.         // 2.添加普通的键值对
  12.         formDateObj.append('username', $('#d1').val());
  13.         formDateObj.append('password', $('#d2').val());
  14.         // 3.添加文件对象
  15.         formDateObj.append('myfile', $('#d3')[0].files[0])
  16.         // 4.将对象基于ajax发送给后端
  17.         $.ajax({
  18.             url:'',
  19.             type:'post',
  20.             data:formDateObj,  // 直接将对象放在data后面即可
  21.             // ajax发送文件必须要指定的两个参数
  22.             contentType:false, // 告诉浏览器不需使用任何编码 django后端能够自动识别formdata对象
  23.             processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
  24.             // 朝后端发送数据
  25.             success:function (args) {
  26.             }
  27.         })
  28.     })
  29. </script>
  • views
  1. def ab_file(request):
  2.     # 判断是否为Ajax请求 返回布尔值
  3.     if request.is_ajax():
  4.         # 判断是否为POST请求
  5.         if request.method == 'POST':
  6.             # 获取对应的数据
  7.             print(request.POST)
  8.             print(request.FILES)
  9.     return render(request, 'ab_file.html')

3.总结Ajax发送文件
  1. 1.需要利用内置对象FormData (普通键值对和文件都可以发送)
  2. // 2 添加普通的键值对
  3. formDateObj.append('username',$('#d1').val());
  4. formDateObj.append('password',$('#d2').val());
  5. // 3 添加文件对象
  6. formDateObj.append('myfile',$('#d3')[0].files[0])
  8. 2.需要指定两个关键性的参数
  9. contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
  10. processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理
  12. 3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中

四:django自带的序列化组件(drf做铺垫)

  1. 如果发现你可以直接使用MySQL但是无法使用sqlite3
  2. 不要慌张不要恐惧 你只需要按照之前MySQL的操作将sqlite3的驱动装一下即可
1.创建表数据
  1. from django.db import models
  3. class User(models.Model):
  4.     username = models.CharField(max_length=32,verbose_name='用户名')
  5.     age = models.IntegerField(verbose_name='年龄')
  6.     gender_choices = (
  7.         (1, 'male'),
  8.         (2, 'female'),
  9.         (3, 'others'),
  10.     )
  11.     gender = models.IntegerField(choices=gender_choices, verbose_name='性别')

2.案例:需求:
  1. 在前端给我获取到后端用户表里面所有的数据 并且要是列表套字典
  1. 1.前后端分离就无法使用"模板语法"
  2. 2.可以是json进行前后端交互
  4. 将后端数据构造成"列表套字典"
  1. from django.http import JsonResponse
  3. def ab_ser(request):
  4.     user_queryset = models.User.objects.all()
  5.     # [{},{},{},{},{}]
  6.     # 将数据构造成列表套字典
  7.     user_list = []
  8.     for user_obj in user_queryset:
  9.         # tmp产生一个字典，字典内封装一些数据
  10.         tmp = {
  11.             'pk': user_obj.pk,
  12.             'username': user_obj.username,
  13.             'age': user_obj.age,
  14.             'gender': user_obj.get_gender_display()
  15.         }
  16.         # 将字典添加到列表内
  17.         user_list.append(tmp)
  18.     # 将列表套字典到页面
  19.     return JsonResponse(user_list, safe=False)
  • ab_ser
  1. {# for循环user_queryset内数据 #}
  2. {% for user_obj in user_queryset %}
  3.     <p>{{ user_obj }}</p>
  4. {% endfor %}

3.JSON序列化前后端分离项目总结
  1. 1.返回的数据是一个列表套字典的格式
  3. [
  4. {"pk": 1, "username": "jason", "age": 25, "gender": "male"},
  5. {"pk": 2, "username": "egon", "age": 31, "gender": "female"},
  6. {"pk": 3, "username": "kevin", "age": 32, "gender": "others"},
  7. {"pk": 4, "username": "tank", "age": 40, "gender": 4}
  8. ]
  10. 前后端分离的项目
  11. 1.作为后端开发的你只需要写代码将数据处理好
  12. 2.能够序列化返回给前端即可
  13. 3.再写一个接口文档 告诉前端每个字段代表的意思即可，
  14. 4.至于后面数据怎么渲染都不管你的事，后端只需要返回即可，
  15. 5.这就叫写接口 前后端分离
4.serializers前后端分离
  1. # 导入serializers 序列化模块前后端分离
  2. from django.core import serializers
  4. def ab_ser(request):
  5.     user_queryset = models.User.objects.all()
  7.     # 序列化  # 第一个参数序列化成什么格式  第二个参数序列化的数据
  8.     res = serializers.serialize('json', user_queryset)
  9.     """serializers会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
  10.     return HttpResponse(res)

5.serializers序列化前后端分离项目总结
  1. 1.serializers序列化后数据来自于那张表 主键 序号等都会显示，更加明确！
  3. [
  4. {   "model": "app01.user",
  5.     "pk": 1,
  6.     "fields": {"username": "jason", "age": 25, "gender": 1}}, 
  8. {   "model": "app01.user",
  9.     "pk": 2,
  10.     "fields": {"username": "egon", "age": 31, "gender": 2}},
  12. {   "model": "app01.user",
  13.     "pk": 3,
  14.     "fields": {"username": "kevin", "age": 32, "gender": 3}}, 
  16. {"  model": "app01.user",
  17.     "pk": 4,
  18.     "fields": {"username": "tank", "age": 40, "gender": 4}}
  19. ]
  21. 2.写接口就是利用序列化组件渲染数据然后写一个接口文档 该交代交代一下就完事了

五:ajax结合sweetalert

1.两种方法刷新当前页面
  1. // 1.lowb版本 直接刷新当前页面
  2. {#window.location.reload() // 重新加载页面#}
  3. // 缺点 当页面在分页的情况下，你在99页删除，刷新自动跳到第一页
  4. // 2.利用DOM操作 动态刷新
  5. currentBtn.parent().parent().remove()  // 页面不刷新
2.搭建二次确认前提
  • 导入dist文件与bootstrap.sweetalert文件

  1. # 1.settings配置文件设置 静态配置
  3. STATIC_URL = '/static/'  # 接口前缀 令牌
  5. STATICFILES_DIRS = [
  6.     # 将静态文件拼接到 顶级目录/暴露外界/环境变量
  7.     os.path.join(BASE_DIR, 'static')
  8. ]
  10. # 2.user_list.html 动态引入静态文件
  12. {# 动态引入静态文件 #}
  13.     {% load static %}
  14.     <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/sweetalert.css' %}">
  15.     <script src="{% static 'bootstrap-3.4.1-dist/js/sweetalert.min.js' %}"></script>
3.user_list
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--bootstrap引入 CSS CDN-->
  7.     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  8.     <!--jQuery引入 CDN-->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  10.     <!--Bootstrap引入 Js CDN-->
  11.     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  13.     <style>
  14.         div.sweet-alert.showSweetAlert.visible h2{
  15.             padding-top: 10px;
  16.         }
  17.     </style>
  19.     {# 动态引入静态文件 #}
  20.     {% load static %}
  21.     <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/sweetalert.css' %}">
  22.     <script src="{% static 'bootstrap-3.4.1-dist/js/sweetalert.min.js' %}"></script>
  24. </head>
  25. <body>
  26. {#左右不留白#}
  27. <div class="container-fluid">
  28.     <h1 class="text-center">数据展示</h1>
  29. {#    分12份#}
  30.     <div class="row">
  31.         <div class="col-md-8 col-md-offset-2">
  32.             <table class="table-striped table table-hover">
  33.                 <thead>
  34.                     <tr>
  35.                         <th>ID</th>
  36.                         <th>username</th>
  37.                         <th>age</th>
  38.                         <th>gender</th>
  39.                         <th>actions</th>
  40.                     </tr>
  41.                 </thead>
  42.                 <tbody>
  43.                     {% for user_obj in user_queryset %}
  44.                         <tr>
  45.                             <td>{{ user_obj.pk }}</td>
  46.                             <td>{{ user_obj.username }}</td>
  47.                             <td>{{ user_obj.age }}</td>
  48.                             {# 获取性别choices #}
  49.                             <td>{{ user_obj.get_gender_display }}</td>
  50.                             <td>
  51.                                 <button class="btn btn-primary btn-xs">编辑</button>
  52.                                                                         {# button 自定义标签属性 #}
  53.                                 <button class="btn btn-danger btn-xs del" delete_id="{{ user_obj.pk }}">删除</button>
  54.                             </td>
  55.                         </tr>
  56.                     {% endfor %}
  58.                 </tbody>
  59.             </table>
  61.         </div>
  63.     </div>
  64. </div>
  66. <script>
  67.     $('.del').on('click', function() {
  68.         // 先将当前标签对象存储起来
  69.         let currentBtn = $(this);  // 指代当前被点击的对象
  70.         // 二次确认弹框
  71.                 swal({
  72.           title: "请确定要删吗？",
  73.           text: "你可要考虑清楚",
  74.           type: "warning",
  75.           showCancelButton: true,
  76.           confirmButtonClass: "btn-danger",
  77.           confirmButtonText: "确认",
  78.           cancelButtonText: "拒绝",
  79.           closeOnConfirm: false,
  80.           closeOnCancel: false
  81.         },
  82.         function(isConfirm) {
  83.           // 判断用户是否真的要删除
  84.           if (isConfirm) {
  85.             // 朝后端发送ajax请求删除数据之后 再弹下面的提示框
  86.               $.ajax({
  87.                   {#url: '/delete_user/' + currentBtn.attr('delete_id'),  // 1 传递主键值方式1 #}
  88.                   url: '/delete_user/',  // 2 放在请求体里面
  89.                   type: 'post',
  90.                   data: {'delete_id':currentBtn.attr('delete_id')},
  91.                   success:function (args) {  // 回调函数  接受后端返回值 args = {'code':'','msg':''}
  92.                       // 判断响应状态码 然后做不同的处理
  93.                       if(args.code === 1000){
  94.                           swal("删了",  args.msg, "success");
  95.                           // 两种方法刷新当前页面
  96.                           // 1.lowb版本 直接刷新当前页面
  97.                           {#window.location.reload() // 重新加载页面#}
  98.                           // 缺点 当页面在分页的情况下，你在99页删除，刷新自动跳到第一页
  99.                           // 2.利用DOM操作 动态刷新
  100.                           currentBtn.parent().parent().remove()  // 页面不刷新
  101.                       }else{
  102.                           swal('完了','出现了未知的错误', 'info')
  103.                       }
  104.                   }
  106.                 })
  107.                 swal("删除,确定", "删除成功", "success");
  108.           } else {
  109.             swal("在考虑一下","已撤销删除", "error");
  110.           }
  111.         });
  112.     })
  114. </script>
  116. </body>
  117. </html>
4.user_list后端用户展示页面
  1. def user_list(request):
  2.     user_queryset = models.User.objects.all()
  4.     return render(request, 'user_list.html', locals())
5.delete_user后端删除返回结果
  1. from django.http import JsonResponse
  3. def delete_user(request):
  4.     # 前后端在用ajax进行交互的时候 后端通常给ajax的回调函数返回一个字典格式的数据
  6.     # 判断是否为ajax请求 返回布尔值
  7.     if request.is_ajax():
  8.         # 判断是否为POST请求
  9.         if request.method == 'POST':
  10.             # code 响应状态码
  11.             back_dic = {"code":1000,'msg':''}
  12.             # 拿到当前用户想要删除的主键值
  13.             delete_id = request.POST.get('delete_id')
  14.             # 删除
  15.             models.User.objects.filter(pk=delete_id).delete()
  16.             back_dic['msg'] = '数据已经删除成功！'
  17.             # 我们需要告诉前端我们操作的结果
  18.             return JsonResponse(back_dic)

6.自定义二次确认增加延迟效果
  • user_list
  1.     $('.del').on('click', function() {
  2.         // 先将当前标签对象存储起来
  3.         let currentBtn = $(this);  // 指代当前被点击的对象
  4.         // 二次确认弹框
  5.                 swal({
  6.           title: "请确定要删吗？",
  7.           text: "你可要考虑清楚",
  8.           type: "warning",
  9.           showCancelButton: true,
  10.           confirmButtonClass: "btn-danger",
  11.           confirmButtonText: "确认",
  12.           cancelButtonText: "拒绝",
  13.           closeOnConfirm: false,
  14.           closeOnCancel: false,
  15.           showLoaderOnConfirm: true
  16.         },
  18. showLoaderOnConfirm: true  		: 增加三点加载动态效果
7.delete_user
  1. def delete_user(request):
  2.     # 前后端在用ajax进行交互的时候 后端通常给ajax的回调函数返回一个字典格式的数据
  3.     # 判断是否为ajax请求 返回布尔值
  4.     if request.is_ajax():
  5.         # 判断是否为POST请求
  6.         if request.method == 'POST':
  7.             # code 响应状态码
  8.             back_dic = {"code":1000,'msg':''}
  9.             # 模拟加载延迟效果
  10.             time.sleep(3)  # 模拟操作数据的延迟
  11.             # 拿到当前用户想要删除的主键值
  12.             delete_id = request.POST.get('delete_id')
  13.             # 删除
  14.             models.User.objects.filter(pk=delete_id).delete()
  15.             back_dic['msg'] = '数据已经删除成功！'
  16.             # 我们需要告诉前端我们操作的结果
  17.             return JsonResponse(back_dic)
  19. 模拟加载延迟效果
  20. time.sleep(3)  # 模拟操作数据的延迟

from表单前后端数据编码格式-Ajax发送json格式数据-Ajax发送文件-Django自带序列化组件-Ajax结合sweetalert的更多相关文章

  1. idHTTP 向网站发送json格式数据

    idHTTP 向网站发送json格式数据 var rbody:tstringstream; begin rbody:=tstringstream.Create('{"name":& ...

  2. springmvc4.0配置ajax请求json格式数据

    1.导入相关jar包:jackson-annotation-2.5.4.jar,jackson-core-2.5.4.jar,jackson-databind-2.5.4.jar. 2.spring- ...

  3. 巧妙的使用jmeter来发送json格式数据

    1. header-manager 修改content-type值. 如果不修改该值, 则默认会是urlencode的数据格式(例如a=5&b=6). 修改为json后,会告诉服务器,发送的数 ...

  4. ajax 提交 json格式数据到后台

    例子:$.ajax({ type: 'POST', url: "/ROOT/modify.do", contentType: "application/json" ...

  5. SpringMvc+ajax 实现json格式数据传递

    传JSON对象 前端 function test () { var param = {username : "yitop"}; $.ajax({ timeout : 20000, ...

  6. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  7. 发ajax响应json格式数据

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  8. linux c 使用socket 发送http请求 可以发送json格式数据

    #include <stdio.h>#include <sys/socket.h>#include <sys/types.h>#include <time.h ...

  9. ajax中json格式数据如何朝后端发送数据

  10. jQuery调用ajax获取json格式数据

    <body> <div>点击按钮获取音乐列表</div> <input type="button" id="button&quo ...

随机推荐

  1. Grafana 入门知识介绍

    通过[Configuration]>[Plugins]添加插件 通过[Configuration]>[Data Sources]添加数据源(分析对象) 通过[Server Admin]&g ...

  2. RabbitMQ原理和架构图解(附6大工作模式)

    为什么要使用RabbitMQ? 1.解耦 系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦. 2.异步 将消息写入消息队列,非必要的业务逻辑以异步的方式运 ...

  3. netstat -lnp |grep XXX后不显示进程

    netstat -lnp |grep XXX后不显示进程,不一定是没有进程,可能是这个命令不好使,换成 ps -ef | grep XXX

  4. 分享一个Vue实现图片水平瀑布流的插件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...

  5. day49-JDBC和连接池05

    JDBC和连接池05 11.BasicDAO 先来分析一个问题 前面我们使用了Apache-DBUtils和Druid简化了JDBC开发,但仍存在以下不足: SQL语句是固定的,不能通过参数传入,通用 ...

  6. 基于GA遗传算法的TSP旅行商问题求解

    import random import math import matplotlib.pyplot as plt import city class no: #该类表示每个点的坐标 def __in ...

  7. 第一阶段：linux运维基础·1

    1. 服务器的主要硬件是?以及其作用是? cpu 相当于人体的大脑,负责计算机的运算和控制 内存 解决cpu与硬盘之间速度不匹配的问题 磁盘 永久存放数据的存储器 主板 直接或间接的将所有的设备连接在 ...

  8. kubernetes VS OpenShift浅析

    Kubernetes vs OpenShift浅析 古语有云:"知彼知己,百战不殆.不知彼而知己,一胜一负.不知彼,不知己,每战必殆." 这句话同样也适用于技术体系.无论我们在落地 ...

  9. RabbitMq简单模式

    RabbitMq简单模式 定义一个生产者,负责发送消息到队列中 /** * @author zjh * 生产者发信息 */ public class Producer { /** * 队列名称 */ ...

  10. 简单的sql注入2

    尝试 1 1' 1" 发现1'还是会报错,所以注入口还是1' 再试试1' and '1'='1发现报出SQLi detected! 取消空格试试1'and'1'='1 似乎可以进入,应该就是 ...