Ajax 与 Django

目录

• Django与AJAX
  • orm优化查询：
  • MTV 与 MVC模型
  • choices 参数
  • update 与 save的区别
  • AJAX导入：
  • Jquery 实现AJAX
  • ajax基本语法结构
  • 原生JS 实现AJAX
  • 前后端传输数据编码格式：
  • Ajax如何传输json格式数据
  • ajax 传输文件数据
  • 序列化：

Django与AJAX

orm优化查询：

orm优化查询： 

核心： -避免重复调用数据库 ，以表为对象，将对象点属性的方式 ，查询数据
redis / mongodb  : 降低主库的压力 （缓存数据库—）
orm模块 本质将一张表 对应为对象

#1.only 与 defer :
--》惰性查询 ： 减少数据库操作 降低数据库的压力

only 与 defer 相反 ： （字段查询）

obj = only('字段1') ： 取字段1的值， --》列表套字典
查询其他字段 ： 重新查找一条就是查一次数据库

defer 内字段 不在字段内 defer()
defer括号内放什么字段 查询出来的对象就没有该字段属性
总结 ： 能少查询一次数据 - 就尽量少查询次！！！

#2.select_related 与 prefetch_related: （链表操作）

select_related ：
--》用于一对一，一对多表对应关系中；

优点： 将表化为对象，不需要重新取数据库操作

prefetch_related ：   所有的表关系中
    --自动外键查询的所有结果封装到对象中
--》不限制类型 ， 为多外键字段，就查询一张表 

 select_related 与  prefetch_related 的比较：
--》结合实际情况  ： 表的大小，张数

耗时操作体现方面：
链表  ： 数据库层先链表
子查询 : 查询的次数（表）

MTV 与 MVC模型

MTV 与 MVC模型：
--》django自称为是MTV框架 本质其实还是MVC

MTV：
        M:models
        T:templates
        V:views
MVC
        M:models
        V:views
        controller  路由匹配(包含urls)
Vue : -->前端（框架）
    --react (基于） 

前端乱的原因之一： 更新速度太快

choices 参数

choices  参数：
--》设置字段类型的约束条件(字段条件的选择有限），绑定对应关系 一一对应;

  存数字 取的时候按照提前设计的好的对应关系 取出对应的真正的数据!

只要是choices字段类型 在获取值的时候 统一句式：
  ---》get_字段名_display()   

eg:
     user_obj1 = models.User.objects.get(pk=4)
     print(user_obj1.get_gender_display())
      # 没有对应关系 获取到的还是数字本身

update 与 save的区别

update 与 save的区别：
	--》两者都是对数据的修改保存操作，

save()函数是将数据列的全部数据项全部重新写一遍，

update()则是针对修改的项进行针对的更新效率高耗时少

AJAX导入：

AJAX:  (Asyn) JS  + XML
	使用Javascript语言与服务器进行异步交互，传输的数据为XML

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

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

提交方式的不同：
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

ajax关键点:
    	1.局部刷新，2.异步请求

#导入ajax，js通过jquery交互：  html
<script>
    $('#b1').click(function () {
        $.ajax({
            url:'',
            type:'POST',
            data:{i1:$('#i1').val(),i2:$('#i2').val()},
            success:function (data) {
                $('#i3').val(data)
            }
        })
    })

</script>

#view 视图 ：
def ajax_test(request):
    if request.method=='POST':
        i1=request.POST.get('i1')
        i2=request.POST.get('i2')
        ret=int(i1)+int(i2)
        return HttpResponse(ret)
    return render(request,'ajax_test.html')

---》当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来

---》异步： 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应

Jquery 实现AJAX

jquery 实现AJAX:

--->1. 要先导入jquery 模块
<script src="/static/setup_Ajax.js"></script>
<script>
    //给input框绑定一个失去焦点的事件
    $('.user').blur(function () {
        //$.ajax为固定用法，表示启用ajax
        $.ajax({
            //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
            url:'',
            //type为标定你这个ajax请求的方法
            type:'POST',
            //data后面跟的就是你提交给后端的数据
            data:{'username':$(this).val()},
            //success为回调函数，参数data即后端给你返回的数据
            success:function (data) {
                ret=JSON.parse(data);
                if (ret['flag']){
                    $('p>span').removeClass('hide');
                }
            }
        })
    });
</script>

view视图 ： 模拟登录认证
def index(request):
    if request.method=='POST':
        ret={'flag':False}
        username=request.POST.get('username')
        if username=='JBY':
            ret['flag']=True
            import json
            return HttpResponse(json.dumps(ret))
    return render(request,'index.html')

ajax基本语法结构

ajax 参数：
	data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型

--》绑定事件

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

ajax基本语法结构
			$.ajax({
				url:'',  // 数据提交的后端地址  不写就是往当前页面提交  也可以写后缀 也可以写全称  跟actions一样
				type:'post',  // 提交方式  默认是get请求
				data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
				success:function (data) {  // 形参data就是异步提交之后后端返回结果
					$('#d3').val(data)  // 回调机制需要做的事情
				}
			})
		# 一旦使用了ajax render,redirect,HttpResponse都不再作用与页面 而是与data交互

原生JS 实现AJAX

原生JS 实现AJAX:
  var b2 = document.getElementById("b2");
  b2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();   	# 创建类
    xmlHttp.open("POST", "/ajax_test/", true);            #urlencoded： 请求方式
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=q1mi&password=123456");   #真实数据
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };

readyState  ？？？

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

AJAX请求方式：
	只要是向我Django提交post请求的数据，都必须校验csrf_token来防伪跨站请求
   ajax默认的编码格式也是urlencoded 也就意味着后端django也是将数据解析到request.POST中

POST : request.POST
       request.FILES  文件

ajax发送数据的编码格式：
1.urlencoded
2.formdata
3.application / json  (json格式）

前端向后端发送请求：
   a标签href参数               get请求
		form表单			   get/post
		ajax                  get/post
form表单发送数据的编码格式：
	1.form表单默认的编码方式是urlencoded
	Content-Type: application/x-www-form-urlencoded
	django后端针对urlencoded数据 会自动解析并且帮你封装到request.POST中

	2.form表单发送文件 编码格式 Content-Type: multipart/form-data;
	针对formdata格式的数据 你在浏览器上是无法查看到（POST请求）
	是一个文件对象django后端也会自动识别帮你放到request.FILES中

	3.form表单无法发送json格式的数据  只能借助于ajax

注意： 涉及到前后端交互的时候 一定要做到数据的格式与编码格式一致（即：数据是一种格式  请求头里面是同一种格式）

Ajax如何传输json格式数据

传输类型：
    Content-Type: application/json
    {"username":"jason","password":"123"}
django后端针对json格式的数据 不会做任何处理 数据怎么来的 会原封不动的放到request.body中

# 触发事件，数据传输！！
$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify({'username':'jason','password':'123'}),
            success:function (data) {
                alert(123)
            }
        })
    })

ajax 传输文件数据

->借助内置对象  new  -->生成对象
该对象即可以携带文件数据 同样也支持普通的键值对

$('#d1').click(function () {

				var MyFormData = new FormData();   // 先生成一个内置对象
				// 1. 先添加普通的键值
				MyFormData.append('username','jason');  // 添加了一组普通的键值对（多个）	

				// 2. 添加文件数据
				MyFormData.append('myfile',$('#d2')[0].files[0]);  // 如何获取input框中文件对象$('#d1')[0].files[0]
				$.ajax({
					url:'',
					type:'post',
					data:MyFormData,
					// 发送文件必须要指定的两个参数
					contentType:false,  // 不适用任何编码 MyFormData对象内部自带编码 django后端能够识别
					processData:false,  // 不要处理数据  

					success:function (data) {
						//返回事件

					}

序列化：

drf ：  django restframework
-->前端想拿到由ORM得到的数据库里面的一个个用户对象，后端想直接将实例化出来的数据对象直接发送给客户端 , 便于前后端的数据交互 ----》 

from app01 import models
from django.core import serializers  #导入模块serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互

def ser(request):
    #拿到用户表里面的所有的用户对象
    user_list=models.User.objects.all()
    #导入内置序列化模块
    from django.core import serializers
    #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
    ret=serializers.serialize('json',user_list)
    return HttpResponse(ret)