今日学习目标

学习Ajax具体操作

文章目录

今日学习目标
学习内容
一、choices字段
二、AjaX
- contentType前后端传输数据编码格式
- ajax传json格式数据
- ajax传文件

学习内容

choices字段
ajax简介

一、choices字段

主要运用在用一些特殊字符或数字代表繁琐的字符串，一来为了节省数据空间，二来为了数据的可读性。可以用于输入用户性别，用户学历，工作状态等。

eg:创建一个用户信息表，其中的性别字段，就可以用到choices字段，用数字来代替对应的性别字符。

from django.db import models
class Userinfo(models.Model):username = models.CharField(max_length=64)# choices字段，用元组形式choices = ((1, 'male'),(2, 'female'),)gender = models.IntegerField(choices=choices)  # 这一句很重要，choices一定要等于定义的那个变量名

要注意的是如果我们在表中存的是上面的元组中的数字，它就会显示，但是数字没有对应关系也是可以存到表中的，但是在点get_gender_display语法获取数字对应的中文时不会取到，而会取到该数字，因此没有对应关系的话，存这个数字也就没有意义。

针对choices字段，如果你想要获取数字所对应的中文，不能直接点字段，

固定句式：数据对象.get_字段名_display()，当没有对应关系的时候，该句式获取到的还是数字

eg:

from app01 import models
user_obj = models.Userinfo.objects.filter(pk=4).first()
print(user_obj.username)
print(user_obj.gender)   # 这样的结果只是数字
print(user_obj.get_gender_display())   # 有对应关系的时候，该句式就能获取到数字对应的中文

对于上述的用户信息表，我们可以用choices字段再给它创建上课记录和本节成绩的字段

# 创建上课记录字段，用特殊的字符来代表繁琐的字符串
record_choices = (('checked', "已签到"),('vacate', "请假"),('late', "迟到"),('noshow', "缺勤"),('leave_early', "早退"),)
record = models.CharField("上课纪录", choices=record_choices, default="checked", max_length=255)

二、AjaX

AjaX是一门js的技术，基于原生js开发的，但是用原生的js写代码过于繁琐

AjaX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

特点：

异步提交

同步异步：描述的任务的提交方式
同步：提交任务之后，原地等待任务的返回结果，期间不干任何事
异步：提交任务之后，不原地等待，直接执行下一行代码，任务的返回通过回调机制
阻塞非阻塞：程序的运行状态
局部刷新

一个页面不是整体刷新，而是页面的某个地方局部刷新

举个例子：展示一个前端页面，页面上有三个输入框，前两个框输入数字，点击按钮朝后端发请求，页面不刷新的情况下，完成数字的加法运算

ajax_test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="t1">+<input type="text" id="t2">=<input type="text" id="t3">
<p><button id="b1">提交计算</button>
</p>
<script>
$('#b1').on('click',function () {// 朝后端提交post数据$.ajax({// 1.到底朝后端哪个地址发送数据url:'',  // 专门用来控制朝后端提交数据的地址，不写默认朝当前地址提交// 2.指定到底发送什么请求type:'post',  // 专门制定ajax发送的请求方式// 3.发送的数据是什么data:{'t1': $('#t1').val(), 't2': $('#t2').val()},// 4.异步提交的任务，需要通过回调函数来处理success:function (data) {  // data形参指代的就是异步提交的返回结果// 通过DOM操作将内容渲染到标签内容上$('#t3').val(data)}})
})
</script>
</body>
</html>

views.py

from django.shortcuts import render, HttpResponse
def ajax_test(request):print(request.is_ajax())  # 判断当前请求是否是ajax请求if request.is_ajax():if request.method == 'POST':t1 = request.POST.get('t1')t2 = request.POST.get('t2')res = int(t1)+int(t2)return HttpResponse(res)return render(request, 'ajax_test.html')

urls.py

from django.contrib import admin
from django.conf.urls import url
from homework1018 import views
urlpatterns = [url('admin/', admin.site.urls),url('^ajax_test/', views.ajax_test),
]

contentType前后端传输数据编码格式

form表单默认发送的编码格式
Content-Type: application/x-www-form-urlencoded
数据格式:username=jason&password=123
django后端会自动处理到:request.POST
form表单发送文件
Content-Type: multipart/form-data
数据格式:隐藏不让看
django后端会自动处理:request.POST request.FILES
ajax默认的编码格式
Content-Type: application/x-www-form-urlencoded
数据格式:username=jason&password=123
django后端会自动处理到:request.POST

总结：django后端针对不同的编码格式数据，会有不同的处理机制以及不同的获取该数据的方法。

ajax传json格式数据

前后端在做数据交互的时候一定一定要表明你所发的的数据到底是什么格式。
前后端交互时你不能骗人家，你的数据是什么格式你就应该准确无误告诉别人是什么格式。

还是以上述例子为例，发送json格式数据

注意

指定contentType参数
contentType:‘application/json’,
要将你发送的数据确保是json格式的
data:JSON.stringify({‘username’:‘jason’,‘password’:‘123’})

前端页面

<p><button id="b1">计算</button>
</p>
<script>
$('#b1').on('click',function () {// 朝后端提交post数据$.ajax({// 1.到底朝后端哪个地址发送数据url:'',  // 专门用来控制朝后端提交数据的地址，不写默认朝当前地址提交// 2.指定到底发送什么请求type:'post',  // 专门制定ajax发送的请求方式// 3.告诉后端你当前的数据格式到底是什么类型contentType:'application/json',  // 告诉后端当前数据格式是json类型// 4.发送的数据是什么data:JSON.stringify({'username':'jason','password':'123'}),// 5.异步提交的任务，需要通过回调函数来处理success:function (data) {  // data形参指代的就是异步提交的返回结果// 通过DOM操作将内容渲染到标签内容上alert(data)}})
})
</script>

后端获取数据

django后端针对json格式的数据不会自动帮你解析会直接原封不动的给你放到request.body中
你可以手动处理获取数据，格式：

json_bytes = request.body
json_str = str(json_bytes,encoding='utf-8')
json_dict = json.loads(json_str)

from django.shortcuts import render, HttpResponse, redirect
import json
def ajax_test(request):if request.method == 'POST':# django后端针对json格式的数据不会自动帮你解析,会直接原封不动的给你放到request.body中# 你可以手动处理,获取数据# print(request.body)  # b'{"username":"jason","password":"123"}'json_bytes = request.bodyjson_str = str(json_bytes, encoding='utf-8')  # 将bytes格式转化为json格式字符串json_dict = json.loads(json_str)   # 将json格式字符串反序列化出来print(json_dict, type(json_dict))return render(request, 'ajax_test.html')

ajax传文件

ajax传文件需要注意的事项

利用formdata对象能够简单的快速传输数据 (普通键值 + 文件)

生成一个formdata对象： var myFormData = new FormData()
有几个参数
data:formdata对象
contentType:false # 不用任何编码因为formdata对象自带编码 django能够识别该对象
processData:false # 告诉浏览器不要处理我的数据直接发就行
需要利用内置对象：FormData
该对象既可以传普通的键值也可以传文件
获取input框用户上传的文件的内容
1.先通过jquery查找到该标签
2.将jquery对象转换成原生的js对象
3.利用原生js对象的方法直接获取文件内容
eg: $(‘#t3’)[0].files[0]

前端页面upload.html

<body>
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>
<script>$('#b1').click(function () {// 1.先生成一个formdata对象var myFormData = new FormData();// 2.朝对象中添加普通的键值myFormData.append('username',$("#t1").val());myFormData.append('password',$("#t2").val());// 3.朝对象中添加文件数据// 1.先通过jquery查找到该标签// 2.将jquery对象转换成原生的js对象// 3.利用原生js对象的方法 直接获取文件内容myFormData.append('myfile',$('#t3')[0].files[0]);$.ajax({url:'',type:'post',data:myFormData,  // 直接丢对象// ajax传文件 一定要指定两个关键性的参数contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象processData:false,  // 告诉浏览器不要处理我的数据 直接发就行success:function (data) {alert(data)}})})
</script>
</body>

后端

def upload(request):if request.is_ajax():if request.method == 'POST':print(request.POST)print(request.FILES)return HttpResponse('收到啦 dsb')render(request, 'upload.html')

Python攻城师的成长——ORM（choices字段）、AJAX相关推荐

Python攻城师的成长————ORM查询
今日学习目标熟悉掌握ORM语法操作文章目录今日学习目标学习内容一.神奇的双下划线查询二.orm创建外键关系三.外键字段的增删改查四.正反向的概念五.ORM多表查询正向查询反向查询 ...
Python攻城师的成长————网络编程（socket套接字、通信循环、链接循环、黏包问题）
今日学习目标学习什么是socket套接字,并依靠它去处理TCP协议等网络编程问题文章目录今日学习目标学习内容一. socket套接字 1.什么是socket 2.套接字发展史及分类 3.套接 ...
Python攻城师的成长————模块突破(collections、time与datetime、random随机数模块)
今日学习目标: 学习并应用collections.time与datetime.random随机数模块知识今日学习内容: collections模块 time与datetime模块 random随机数 ...
Python攻城师的成长————面向对象的三大特征（继承、多态）
学习目标: 了解继承与多态的概念,重点是要学会运用继承去处理问题学习内容: 继承在面对对象程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类,而被继 ...
Python攻城师的成长————MySQL数据库关键字
今日学习目标熟悉关键字用法,掌握多表查询思路文章目录今日学习目标学习内容一.查询关键字查询关键字之having过滤查询关键字之distinct去重查询关键字之order by排序查询 ...
Python攻城师的成长————css语法、伪元素选择器（部分）
今日学习目标熟悉并掌握css中各种修改属性的方法. 文章目录今日学习目标学习内容一.伪元素选择器 css操作文本内容选择器优先级二.css修改属性 css修改文字属性 css修改字体属性 ...
Python攻城师的成长————Django框架（csrf相关装饰器、基于中间件思想编写项目、auth认证模块）
今日学习目标逐步掌握csrf相关装饰器.基于中间件思想编写项目.auth认证模块知识点文章目录今日学习目标学习内容一. csrf相关装饰器二.基于中间件思想编写项目三.auth认证模块 ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
Python攻城师————MySQL数据库（自增、外键、关键字）
今日学习目标正式学习MySQL数据库语句. 文章目录今日学习目标学习内容一.自增特性二.约束条件之外键外键的定义外键约束创建三.查询关键字查询关键字之select与from 查询关键 ...
如何成为一名优秀的web前端工程师（前端攻城师）
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优 ...

Python攻城师的成长——ORM（choices字段）、AJAX