• Ajax


    Ajax

    一、choice参数

    ​ chiice参数可将序号转变为其对应的内容:

    # 性别
    choices = (
    (1,'male'),
    (2,'female'),
    )
    gender = models.IntegerField(choices=choices)
    

    ​ 注意:choice()参数中储存的是元组;如果存储的数字不在元组范围内的话,依然可以输出,但是没有内容,输出的只是数字。

    ​ 获取字段:

    from app01 import models
    user_obj = models.Userinfo.objects.filter(pk=2).first()
    print(user_obj.username)
    print(user_obj.get_gender_display())
    
    	choice()方法中,希望获取数字对应的内容时,不能直接使用点字段的方法,而是使用固定句式“数据对象.get_字段名\_display()”,没有对应关系的时候,取到的还是数字。
    

    二、MTV与MVC模型

    ​ django看起来是MTV模型框架,实际采用的时MVC。

    ​ MTV: models、templates、views;

    ​ MVC: models、views、controller(控制器)

    三、ajax

    ​ AJAX(Asynchronous Javascript And XML):“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输XML数据。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

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

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

    3.1 展示在线加法运算

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

    <input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
    <p>
        <button id="b1">
            计算
        </button>
    </p>
    
    $('#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)
    		}
    	})
    })
    

    3.2 使用Ajax传json格式数据

    ​ django后端针对json格式的数据,不会自动解析,会放置到request.body中,需要手动处理、获取数据。

    json_bytes = request.body
    json_str = str(json_bytes,encoding='utf8')
    json_dict = json.loads(json_str)
    

    ​ 注意:需要指定contentType参数:

    ​ 要确保发送的数据是json格式:

    contentType:'application/json',
        
    data:JSON.stringify({'username':'json','password':'123'})
    

    3.3 ajax传输文件

    ​ 传输文件需要使用内置对象Formdata,该对象既可以传键值对,也可以传文件。

    ​ 获取input标签中用户上传的文件的文件内容:

    ​ 1.先通过jquery查找到该标签;

    ​ 2.将jquery对象转换成原生的js对象;

    ​ 3.利用原生js对象的点方法直接获取文件内容。

    $('#t3')[0].files[0]
    

    ​ 传输文件:

    $('#b1').click(function){
    	//1.生成一个formata对象
    	var myFormData = new FormData();
    	//2.朝对象总添加普通键值
    	myForData.append('username',$("#t1").val());
    	myForData.append('username',$("#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,//不需要处理数据,直接发送就行
    		succsee:function(data){
    			alert(data)
    		}
    	})
    }
    

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

    ​ form表单默认的提交数据格式是urlencoded(例如:username = admin&password=123这种格式),django后端针对urlencode数据格式会自动解析,将结果打包给request.POST,用户可以从request.POST获取信息。

    ​ django后端针对formdata格式类型数据 也会自动解析,但是不会放入request.POST中,而是放到了request.FILES中。

    ​ ajax默认的提交数据的编码格式是urlencoded。

    ​ 注意:django后端会针对不同的编码格式,使用不同的机制处理并获取数据。因此前后端数据交互时一定标明数据格式!

    3.5 序列化组件

    ​ 后端将数据查询后返回给前端,应该是字典套列表的格式。

    def a(request):
        user_queryset = modelds.Userinfo.object.all()
        user_list = []
        for user_obj inuser_queryset:
            user_list.append({
                'username':user_obj.username,
                'password':user_obj.password,
                'gender':user_obj.get_gender_display(),
            })
        return reder(request,'a.html',locals())
    

    ​ 以上方法可以实现格式要求,但是使用serializers模块,可以更快捷实现:

    from django.core import serializes
    def a(request):
        res = serializers.serializer('json',user_queryst)
        peturn render(request,'a.html',locasl())
    

    3.6 ajax + sweetalert

    ​ 使用sweetalert需要先下载Bootstrap-sweetalert项目。

    <head>
        {% load static %}
        <link rel="stylesheet" href="{%static 'dist/sweeralert.css' %}">
        <scriot src='{% static 'dic/sweetalert.mon.js' %}'></scriot>
    </head>
    <body>
        <script>
            $('.cancel').click(function()){
            	var $btn = $(this);
            	swal({
                    title:'确定删除么?',
                    text:'删除了就没有了',
                    type:'warning',
                    showCancelButton:true,
                    confirmButtonClass:'btn-danger',
                    confirmButtonText:'是的我就要删',
                    cancelButtonText:'算了,不删了'
                    closeOnConfirm:false,
                    showLoaderOnConfirm:ture,
                },
                     function({
                         $.ajax({
                         	url:'',
                         	type:'post',
                         	data:{'delete_id':$btn.attr('delete_id')},
                     		success:function(data){
                    			if(data.code==1000){
                                    swal(data.msg,'删除成功','success');
                                    //1.直接刷新
                                    window.location.reload()
                                    //2.通过DOM,实时删除
                                    $btn.parent().parent().remove()
                                }else{swal('发生未知错误','info')}
                				}
                     		}
                     	});
                    
            		}),
              })
        
        </script>
    </body>
    
  • 相关阅读:
    c-大量经典的c算法---ShinePans
    HDU 5009 DP
    C# ignoring letter case for if statement(Stackoverflow)
    ETL工具之ODI
    Oracle ODI系列之一(ODI知识模块)
    Linux下chkconfig命令详解
    数据仓库数据库设计方法---关系模型和多维模型比较分析
    ODI学习笔记2--ODI产品架构
    Linux查看CPU和内存使用情况
    ODI Studio拓扑结构的创建与配置(Oracle)
  • 原文地址:https://www.cnblogs.com/tangceng/p/11755561.html
Copyright © 2020-2023  润新知