Ajax相关知识点

最新推荐文章于 2023-02-07 16:13:52 发布

Jayxieming

最新推荐文章于 2023-02-07 16:13:52 发布

阅读量389

点赞数

分类专栏： django 前端文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/Yydsaoligei/article/details/126751748

版权

django 同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

前端

8 篇文章 1 订阅

订阅专栏

一：Ajax

1.作用

异步提交，局部刷新

2.前提：

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

3.基础语法

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

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>

前端代码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>

后端代码

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')

二：前后端传输数据编码格式(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 () {
            }
        })
    })

3.后端如何获取json格式的数据

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

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

import json

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

四：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>

后端代码

def get_files(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)

总结：

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)
            }

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)

七：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 %}