如何利用AJAX获取Django后端数据详解

如何利用AJAX获取Django后端数据详解

概述

AJAX（Asynchronous JavaScript and XML，异步的JavaScript和XML技术）主要通过XMLHttpRequest对象，以异步方式与后端进行数据交互。本文将介绍如何使用AJAX获取Django后端数据，包括利用jQuery和原生JavaScript两种方式。

操作步骤

1. 安装jQuery

AJAX操作比较繁琐，利用jQuery库能够简化这个过程。在html页面头部加入如下代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 编写Django视图函数

在Django后端编写视图函数，该视图函数将要返回的是需要请求的数据。比如，下面描绘如何利用视图函数返回数据：

def get_data(request):
    data_list = [1, 2, 3]
    return JsonResponse({'data_list': data_list})

3. 编写AJAX代码

接下来，我们通过AJAX来获取Django端的数据。

使用jQuery的方法：

$.ajax({
    url: '/get_data/',  // 该url需要和上述视图函数中的url一致
    type: 'get',  // 默认是get请求
    dataType: 'json',  // 服务器返回的数据类型
    success: function(data) {  // 请求成功后的回调函数
        // data即是返回的json数据，例如这里的data_list
        console.log(data.data_list);
    },
    error: function() {  // 请求失败后的回调函数
        console.log('请求失败')
    }
});

原生JavaScript的方法：

var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
xhr.open('GET', '/get_data/');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {  // 请求成功后的回调函数
        var data = JSON.parse(xhr.responseText);
        console.log(data.data_list);
    } else {  // 请求失败后的回调函数
        console.log('请求失败')
    }
}
xhr.send();

示例说明

示例1：

Django视图函数：

def get_user_info(request):
    user_info = {'name': 'Tom', 'age': 18, 'gender': 'male'}
    return JsonResponse(user_info)

jQuery的AJAX代码：

$.ajax({
    url: '/get_user_info/',
    type: 'get',
    dataType: 'json',
    success: function(data) {
        console.log('name:', data.name, '\nage:', data.age, '\ngender:', data.gender);
    },
    error: function() {
        console.log('请求失败')
    }
});

示例2：

Django视图函数：

def get_comments(request):
    comments = [{'content': 'good', 'created_time': '2021-01-01'}, 
                {'content': 'cool', 'created_time': '2021-01-02'}]
    return JsonResponse({'comments': comments})

原生JavaScript的AJAX代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/get_comments/');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        var comments = data.comments;
        for (var i=0, len=comments.length; i<len; i++) {
            console.log('评论内容：', comments[i].content, '\n创建时间：', comments[i].created_time, '\n');
        }
    } else {
        console.log('请求失败')
    }
}
xhr.send();

总结

以上就是如何利用AJAX获取Django后端数据的详细攻略，需要注意的是，由于AJAX是异步操作，为避免可能出现的多次请求同时返回等问题，建议在视图函数中不设置缓存。可以通过HttpResponse对象的['Cache-Control']或['Pragma']元素设置为no-cache达到该目的。