Django使用Ajax异步传输数据（二）将后端字符串、列表、字典格式数据填充到前端

本文介绍: 使用Aja x 交互时，从后端传过来的数据类型：- 字符串– 列表– 字典都需要 js中不同的操作进行填充

文章 目录

1. Ajax交互数据填充
2. 示例代码
3. 效果图

1. Aja x 交互 数据 填充

使用Aja x交互时，从后端传过来的数据类型：

都需要 js中不同的操作进行填充

2. 示例 代码

后端代码

这一部分的代码简单粗暴，首先DynamicPageView使用GET方法返回页面，对应的其他类都使用GET方法返回对应类别的数据：

from django.shortcuts import render
from django.views.generic import View
from .form import FormTestForm, SaveDataForm, SaveFileInDjangoForm
from .models import SaveDataModel, SaveFileInDjangoModel, MyModel
from django.core.paginator import Paginator
import matplotlib.pyplot as plt
from io import StringIO
from django.http import JsonResponse


class DynamicPageView(View):
    def get(self, request):  # 用于显示页面
        return render(request, "dynamic_load.html")


class ShowAjaxStringView(View):
    def get(self, request):  # 返回字符串
        return JsonResponse("这是一个字符串", safe=False)


class ShowAjaxListView(View):
    def get(self, request):  # 返回list
        return JsonResponse([1, 2, 3, 4, 5], safe=False)


class ShowAjaxDictView(View):
    def get(self, request):  # 返回字典
        return JsonResponse({
            "name": "小明",
            "age": 12,
            "兴趣": "搬砖",
        }, safe=False)

前端代码

前端代码里，包含三个【p】标签，分别要填充：

id=“show _string”：字符串
id=“show _list”：列表
id=“show _dict”：字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AJAX局部刷新实例</title>
</head>
<body>
<input type="button" value="显示Ajax返回值" id="ajax_button">

<hr>
字符串：<p id="show_string"></p>
<hr>
列表：<p id="show_list"></p>
<hr>
字典：<p id="show_dict"></p>
<hr>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $("#ajax_button").on("click", function () {
        // ====================== 返回字符串类型 ===========================
        $.ajax({
            url: "/show_ajax_num/", //地址
            type: "GET", data: {},
            success: function (data) {
                $("#show_string").html(data);
            }
        })
        // ====================== 返回list类型 ===========================
        $.ajax({
            url: "/show_ajax_list/", //地址
            type: "GET", data: {},
            success: function (data) {
                for (let i = data.length - 1; i >= 0; i--) {
                    $('#show_list').append(' ' + data[i])
                }
            }
        })
        // ====================== 返回字典dict类型 ===========================
        $.ajax({
            url: "/show_ajax_dict/", //地址
            type: "GET", data: {},
            success: function (data) {
                $.each(data, function (dict_key, dict_value) { //键、值
                	// 这里直接把键、值都贴到前端
                    $("#show_dict").append(dict_key)
                    $("#show_dict").append(dict_value)
                })
            }
        })
    })
</script>
</body>
</html>

配置路由：

from django.urls import path
from .views import DynamicPageView, ShowAjaxStringView, ShowAjaxListView, ShowAjaxDictView

urlpatterns = [
    path('django_ajax/', DynamicPageView.as_view()),  # 显示ajax的网页
    path("show_ajax_num/", ShowAjaxStringView.as_view()),  # 获取ajax返回
    path("show_ajax_list/", ShowAjaxListView.as_view()),  # 获取ajax返回
    path("show_ajax_dict/", ShowAjaxDictView.as_view()),  # 获取ajax返回
]