day10 ajax的基本使用

day10 ajax的基本使用

今日内容

• 字段参数之choices（重要）

• 多对多的三种创建方式

• MTV与MVC理论

• ajax语法结构（固定的）

• 请求参数contentType

• ajax如何传文件及json格式数据

字段参数之choices（重要）

用户表
	性别字段
    学历字段
    在职状态
    ...
"""如果我们在设计表字段的时候 有一些字段能够完全列举出所有可能的情况"""
# 这个时候推荐使用choices参数

class User(models.Model):
    name = models.CharField(max_length=32)
    age = models.IntegerField()
    gender_choices = (
        (1, '男性'),
        (2, '女性'),
        (3, '其他')
    )  # 存入别的字符类型也可以
    gender = models.IntegerField(choices=gender_choices)  # choices必须等于对应关系

user_obj = models.User.objects.filter(pk=1).first()
user_obj.gender  # 1
user_obj.get_gender_display()  # 使用它可以取出1的对应项，没有对应项只能取出存的值
'''如果没有对应关系则返回数据本身'''

多对多的三种表关系

# 第一种方式：全自动（自动帮你创建第三张表）
	"""
	优点在于不需要我们编写第三张关系表代码
	缺点在于第三张关系表字段固定死了无法扩展（比如新增字段）
	"""
	author = models.ManyToManyField(to='Author')

# 第二种方式：纯手动（自己创建第三张关系表） 不推荐使用
	"""
	优点在于第三张表可以无限制的扩展字段
	缺点在于需要自己手动编写 并且涉及到ORM正反向查询的时候不方便
	"""
	class Book(models.Model):
    	pass
    class Author(models,Model):
    	pass
    class Book2Author(models,Model):
        book_id = models.ForeignKey(to='Book')
        author_id = models.ForeignKey(to='Author')
        bond_time = models.DateField(auto_now=True)

# 第三种方式：半自动（根据需求使用）
	'''
	优点：正反向查询还可以继续使用，第三张表可以自己添加字段
	缺点：代码写起来麻烦
	'''
	class Book(models.Model):
        authors = models.ManyToManyField(  # 创建多对多外键字段
            to='Author',
            through='Book2Author'  # 告诉orm第三张关系表是谁不要自动创
        	through_fields=('book_id','author_id')  # 通过哪两个字段
        )
     class Author(models.Model): # 演示下，下面可参考
        # 多对多外键字段在orm中可以建在任意一张管理表中
        books = models.ManyToManyField(
            to='Book',
            through='Book2Author'  # 告诉orm第三张关系表是谁不要自动创
        	through_fields=('author_id','book_id')  # 通过哪两个字段
        )
     class Book2Author(models.Model):
        book_id = models.ForeignKey(to='Book')      # 关联book表
        author_id = models.ForeignKey(to='Author')  # 关联author表
        bond_time = models.DateField(auto_now=True)  # 增加字段

MTV与MVC模型理论

MTV模型
	M:models模型层
    T:template模板层
    V:views视图层

MVC模型
	M:models模型层
    V:views视图层
    C:controllar控制层(urls.py...)
"""
django自称为MTV模型  其实本质也还是MVC模型
	大部分的web框架都属于MVC
"""

ajax语法

# 特征:异步提交 局部刷新
"""
可以发送网络请求的标签
	a标签			GET请求
	form表单		GET请求 POST请求

ajax技术			GET请求 POST请求
"""
# ajax并不是一门新的技术 而是有js代码演变而来 相当于我们python基础所学的装饰器(名称空间 函数对象 闭包函数)
# 我们学习jQuery封装之后的ajax代码(格式固定 并且语法简单 好记)
# 以后我们可能还会遇到使用其他框架封装的ajax技术

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

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
    同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
    异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

"""使用jQuery封装的ajax一定要记得先引入ajax资源"""

# 基本语法格式
$.ajax({
    url:'',  // 向哪个后端发送请求（路径有3方式：不写，后缀，全路径）
    type:'post',  // 指定请求的方式(get post)
    data:{'username':'jason','pwd':123},  // 请求携带的数据
    success:function (args) {
        // 异步回调机制(后端返回数据之后自动触发的操作)}
            })

# 并且后端中小白三板斧中返回的都会被function (args)中args接收，不会在和前端浏览器交互

content-Type参数

content-Type相当于说明了数据的组织格式
后端通过该参数就可以提前明确数据格式之后采取对应的处理措施操作数据

ajax默认的数据格式为urlencoded
	该格式数据:i1=123213&i2=12313
     针对该类型的数据:django会自动处理到request.POST中

form表单默认的数据格式也是urlencoded
	该格式数据:i1=123213&i2=12313
     针对该类型的数据:django会自动处理到request.POST中
form表单还可以发送数据格式为formdata
	该格式数据无法查看到
    针对该类型的数据:普通的数据还是解析到request.POST中 文件类型的数据解析到request.FILES中

Ajax发送Json格式数据

"""
python中序列化反序列化
	import json
	json.dumps()
	json.loads()
Js中序列化反序列化
	JSON.stringify()
	JSON.parse()
"""
# 言行一致
$.ajax({
    url:'',
    type:'post',  // 不写该参数 默认也是get请求
    data:JSON.stringify({'username':'jason','pwd':123}),
    contentType:'application/json',
    success:function (args) {
        alert(args)
    }
})

def ajax(request):
    if request.method == 'POST':
        # 用request.POST,GET,FILES,获取不到json类型的数据。
        print(request.body)  # b'{"name":"meng","age":18}'
        json_bytes = request.body
        json_dict = json.loads(json_bytes)  # 解码
        print(json_dict)  # {'name': 'meng', 'age': 18}
        return HttpResponse(123)
    return render(request,'ajax.html')

使用Ajax计算小工具

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
# 使用ajax必须导入文件

<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="d1">计算</button>
<script>
    // 1.查找计算器按钮标签
    let $btnEle = $('#d1');  // 根据id查找标签对象
    // 2.给按钮标签绑定一个点击事件
    $btnEle.on('click', function () {
        // 3.获取两个输入框内的数据
        // 3.1 先查找到输入框之后获取里面的value属性值即可
         let i1Val = $('#i1').val(); // val()拿到输入框里面的值
         let i2Val = $('#i2').val();
        // 4.发送ajax的请求
        $.ajax({
            uri: '',  // 向哪个后端发送请求（路径有3方式：不写，后缀，全路径）
            type: 'post',    // 规定发送什么请求方式(get post)
            data: {'i1': i1Val,'i2':i2Val},  // 请求携带的数据
            success:function (args) {   // 异步回调机制（后端返回数据之后，自动触发的操作）
                // 形参args就是后端返回过来的数据
                $('#i3').val(args)
            }
        })
    })
</script>
</body>

# 后端
from django.shortcuts import render,HttpResponse
import json
def ajax(request):
    if request.method == 'POST':
        print(request.POST)
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        res = int(i1) + int(i2)
        return HttpResponse(res)
    return render(request,'ajax.html')