• Ajax 与 Django


    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)
    
  • 相关阅读:
    Vue3使用video插件
    Syntax Error: Error: PostCSS received undefined instead of CSS string
    基于Frida的脱壳工具
    java byte[]与十六进制字符串相互转换
    Linux 安裝mitmproxy抓包基础教程
    Windows 安装mitmproxy 抓包基础教程
    python之get/post请求指定URL返回的网页内容,出现gzip乱码解决
    一张图说明java层与so层分析技巧
    app动态调试so层环境搭建
    frida hook基本操作命令
  • 原文地址:https://www.cnblogs.com/shaozheng/p/11959881.html
Copyright © 2020-2023  润新知