Ajax

Ajax

AJAX（asynchronous Javascript And XML）

异步的JavaScript和XML
优点：
- AJAX使用JavaScript技术向服务器发送异步请求
- 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
- 因为服务器响应的内容不再是整个页面，而是页面中的部分内容，所以AJAx性能高
- 两个关键点：局部刷新，异步请求

案例

在前端页面上有三个输入框，实现前两个框内输入数字，朝后端发请求，在页面不刷新的情况下实现第三个框内为前两个数字的和

two_sum.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>
</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<button id="s1">提交</button>

<script>
    $('#s1').on('click', function(){
            $.ajax({
        url: '',
        type: 'post',
        data: {'t1': $('#t1').val(), 't2': $('#t2').val()},
        success: function (data) {
            $('#t3').val(data)

        }
    })
    })
    
</script>
</body>
</html>

views.py

def two_sum(request):
    if request.method == 'POST':
        t1 = request.POST.get('t1')
        t2 = request.POST.get('t2')
        tsum = int(t1) + int(t2)
        return HttpResponse(tsum)
    return render(request, 'two_sum.html', locals())

AJAX传json格式数据

djang不会将前端传过来的json格式的数据解析，而是直接放到request.body中

json_bytes = request.body
json_str = json_bytes.decode('utf8')
json_dict = json.loads(json_str)

注意：

指定contentType参数

contentType:'application/json'
要发送的数据，确保是json格式

data: JSON.stringify({'username': 'qqqq', 'password': '123456'})

AJAX传文件

前端：需要利用内置对象Formdata，该对象既可以传普通的键值，也可以传文件

如何获取input获取用户上传文件的文件内容

先通过jquery找到该标签
将jquery对象转换成原生的js对象
利用原生js对象的方法，直接获取文件内容

<script>
    $('#b1').on('click', function () {
        // 生成formdata对象
        var myFormData = new ForData();
        
        // 向对象中添加普通键值
        myFormData.append('username', $('#t1').val());
        myFormData.append('password', $('#t2').val());
        
        // 向对象中添加文件数据
        myFormData.append('myfile', $('#t3')[0].files[0]);
        
        $.ajax({
            url: '',
            type: 'post',
            data: myFormData;
            
            cententType:false,      // 不用编码，默认使用formdata自带编码，django能够识别该对象
            processData:false,      // 浏览器对数据不做处理，直接发送
            
            success: function (data) {
                alert(data)
        }
        })
    })
</script>

注意：

利用formdata对象，能够简单快速的传输数据，包括普通键值和文件
ajax中参数设置：
- data: formdata对象
- contentType: false
- processData: false

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

urlencode数据格式
- form表单默认的提交数据的编码格式是urlencode数据格式
- 数据格式：username=admin&password=123
- django后端会将urlencode数据格式解析后打包给request.POST，用户从request.POST中获取数据
- ajax默认的提交数据的格式也是urlencode
formdata数据格式
- django后端会将formdata格式的数据解析后打包给request.FILES，而不是request.POST
前后端交互数据格式的统一
- 前后端在做数据交互的时候，一定要表明所发的数据是什么格式

序列化组件

将用户表的数据查询出来，返回给前端
返回给前端的是一个字典，字典中是数据的字段

from django.core import serializers


def ser(request):
    user_queryset = models.Userinfo.objects.all()
    res = serializers.serialize('jason', user_queryset)     # 序列化user_queryset, 格式为json
    return render(request, 'ser.html', locals())

原文地址：https://www.cnblogs.com/zj420255586/p/11755599.html