肆拾玖 ---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>

猜你喜欢

转载自www.cnblogs.com/tangceng/p/11755561.html