• Ajax相关知识点

    目录标题

    一：Ajax

    1.作用

    异步提交，局部刷新

    2.前提：

    基于js编程语言，相当于js自带的功能，我们学习的是jQuery封装之后的版本，所以使用前必须导入jQuery

    3.基础语法
    $.ajax({
    url:'',  控制数据的提交地址
    type:'',  控制请求方式，默认也是get请求
    data:{}, 组织提交的数据
    success: function(形参){
        异步回调函数，接收前端发过来的所有数据
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    4.案例
    4.1.利用ajax实现前后端数据交互
    • 前端代码1(点击事件)
    <body>

<input type="text" id="d3">+<input type="text" id="d4">=<input type="text" id="d1">
<input type="submit" id="d2">

<script>
    $('#d2').click(function (){
        $.ajax({
            url:'',
            type:'post',
            data: {'n1':$('#d3').val(), 'n2':$('#d4').val()},
            success: function (args){
                $('#d1').val(args)
            }
        })
    })
</script>

</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 前端代码2(失去焦点事件)
    <body>

<input type="text" id="d3">+<input type="text" id="d4">=<input type="text" id="d1">

<script>
    $('#d4').blur(function (){
        $.ajax({
            url:'',
            type:'post',
            data: {'n1':$('#d3').val(), 'n2':$('#d4').val()},
            success: function (args){
                $('#d1').val(args)
            }
        })
    })
</script>

</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 后端代码
    def ajax(request):
    if request.is_ajax():
        if request.method == 'POST':
            n1 = request.POST.get('n1')
            n2 = request.POST.get('n2')
            n3 = int(n1) + int(n2)
            return HttpResponse(n3)
    return render(request, 'ajax.html')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    二：前后端传输数据编码格式(contentType)

    1.前后端传输数据的编码格式
    1.1.urlencoded(默认的编码格式)
    • 数据格式： name=jason&pwd=123&hobby=read
    • 后端获取：只要是符合urlencoded数据格式的数据，django后端都会统一处理到request.POST中
    1.2.form_data(文件)
    • 数据格式：无法查阅
    • 后端获取：文件数据：request.FILES 普通数据：request.POST
    1.3.json
    • 数据格式：json格式
    • 后端获取：request.body中(bytes类型) django后端不会处理json格式的数据，需要自己处理
    2…前提
    • 我们主要研究post编码格式
    2.form表单像后端发送post请求

    1.form表单没法发送json格式的数据

    2.form表单默认的编码格式是：urlencoded

    3.ajax像后端发送post请求

    1.ajax默认的请求方式也是：urlencoded

    三：ajax发送json格式的数据

    1.前提：
    • 前后端传输数据的时候，一定要确保编码格式和数据格式是一致的
    2.代码实现
        $('#d2').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'xie', 'age':18}),  // 把数据转成json格式
            contentType: 'application/json',  // 指定编码格式
            success: function () {
            }
        })
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    3.后端如何获取json格式的数据

    1.数据在request.body中，是二进制格式的数据(bytes)

    2.后端手动解析json格式的数据：

    import json

json_bytes = request.body
json_dic = json.loads(json_bytes)

    • 1
    • 2
    • 3
    • 4

    四：ajax发送文件

    • 前端代码
    <body>
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">点我</button>
<script>

    //点击按钮，向后端发送普通键值对和文件数据
    $('#d4').on('click', function () {
        // 1.需要利用FormData内置对象
        let formDataobj = new FormData()
        // 2.添加普通键值对
        formDataobj.append('username',$('#d1').val());
        formDataobj.append('password',$('#d2').val());
        // 3.田间文件对象
        formDataobj.append('myfile',$('#d3')[0].files[0])
        
        //4.基于ajax发送到后端
        $.ajax({
            url:'',
            type:'post',
            data: formDataobj,
            
            //ajax发送文件必须要指定的两个参数
            contentType:false,  // 不使用任何编码，django后端会自动识别formData对象
            processData:false,  // 告诉浏览器，不要对数据进行任何处理
            
            success:function (args) {
                
            }
        })
    })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 后端代码
    def get_files(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
     

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    总结：
    • 1.需要利用内置对象FormData
    • 2.需要指定两个关键性的参数
    • 3.django后端能够自动识别到formdata对象，并且把普通键值对数据解析封装到request.POST中，文件数据解析封装到request.FILES中

    五：回调函数

    1.后端跟ajax交互，通常都返回json格式的数据

    2.当前端返回的数据是HttpResponse数据的时候，不会对数据进行反序列化操作（如果想让前端反序列化，需要：dataType: ‘JSON’）

    success:function (args) {
                alert(args)
                window.location.href = args
                console.log(typeof args)
                console.log(args)
                let a = JSON.parse(args)
                console.log(typeof a)
                console.log(a)
                console.log(a.name)
            }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3.当前端返回的数据是JsonResponse数据的时候，前端会自导反序列化

    六：django自带的序列化组件

    def ser(request):
    # 拿到表中的数据对象
    user_list = models.User.objects.all()
    # 导入序列化模块
    from django.core import serializers
    # 调用该模块中的方法，完成数据的序列化
    res = serializers.serialize('json',user_list)
    return HttpResponse(res)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    七：ajax结合sweetalert

    <a href="#" class="btn btn-primary btn-xs" id="d1">删除</a>

{% block js %}
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        $('#d1').click(function (){
            swal({
                  title: "确定要删除数据吗？",
                  text: "回头是岸",
                  icon: "warning",
                  buttons: ['取消','确认'],
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                    swal("我靠，真的删了！", {
                      icon: "success",
                    });
                  } else {
                    swal("还好你没删");
                  }
                });
        })
    </script>
{% endblock %}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
  • 相关阅读:
    面试官：MyBatis 插件用途和底层原理
    swift枚举(三)-Optional
    Python 题库自动化面试题
    Mybatis-Plus之使用LocalDateTime等java8新日期时间类型报错
    dewarp:数据变换
    【sgTileImage】自定义组件：瓦片图拖拽局部加载、实现以鼠标为中心缩放
    【接口自动化测试】Postman(一) 介绍和安装
    二维码制作教程：如何制作一个文件二维码？
    Nodejs+vue+elementui汽车销售网站管理系统
    MVC、MVP、MVVM区别
  • 原文地址：https://blog.csdn.net/Yydsaoligei/article/details/126751748