快捷導(dǎo)航

Django傳遞數(shù)據(jù)給前端的3種方式小結(jié)

更新時(shí)間：2024年01月23日 09:27:18 作者：只看不學(xué)

Django從后臺(tái)往前臺(tái)傳遞數(shù)據(jù)時(shí)有多種方法可以實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Django傳遞數(shù)據(jù)給前端的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、使用模板引擎：

Django的模板引擎允許在后端代碼中將數(shù)據(jù)傳遞給前端模板，并在模板中進(jìn)行渲染。在視圖函數(shù)中，可以使用render函數(shù)來(lái)將數(shù)據(jù)傳遞給模板并渲染頁(yè)面。例如：

from django.shortcuts import render

def my_view(request):
    data = {'name': 'John', 'age': 30}
    return render(request, 'my_template.html', data)

在my_template.html模板中可以通過(guò){{ name }}和{{ age }}來(lái)訪問(wèn)傳遞的數(shù)據(jù)。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>個(gè)人信息</title>
</head>
<body>
    <p>姓名：{{ name }}</p>
    <p>年齡：{{ age }}</p>
</body>
</html>

二、使用JSON數(shù)據(jù)：

如果需要將數(shù)據(jù)以JSON格式傳遞給前端，可以在視圖函數(shù)中使用JsonResponse類(lèi)。例如：

from django.http import JsonResponse

def my_view(request):
    data = {'name': 'John', 'age': 30}
    return JsonResponse(data)

這樣前端可以通過(guò)AJAX、axios等方式接收J(rèn)SON數(shù)據(jù)。例如：

// 假設(shè)你使用了jQuery來(lái)進(jìn)行AJAX請(qǐng)求
$.ajax({
  url: '/api/get_data/', // 后端API接口地址
  type: 'GET',
  dataType: 'json',
  success: function (data) {
    // 這里的data就是從后端獲取到的JSON數(shù)據(jù)
    // 可以通過(guò)data.name和data.age來(lái)訪問(wèn)其中的字段
    var name = data.name;
    var age = data.age;
    console.log('Name:', name);
    console.log('Age:', age);
    
    // 你可以在這里使用這些數(shù)據(jù)來(lái)更新頁(yè)面內(nèi)容、顯示提示信息等等
  },
  error: function (xhr, status, error) {
    console.error('Failed to fetch data:', error);
  }
});

// 假設(shè)你使用了axios庫(kù)來(lái)進(jìn)行請(qǐng)求
<!DOCTYPE html>
<html>
<head>
  <title>Axios Example</title>
</head>
<body>
  <!-- 引入axios庫(kù) -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- 在這里添加JavaScript代碼 -->
  <script type="text/javascript">
    // GET請(qǐng)求示例
    axios.get('/api/user_info/')
      .then(function (response) {
        // 請(qǐng)求成功時(shí)的處理
        console.log('GET Response:', response.data);

        // 假設(shè)返回的數(shù)據(jù)結(jié)構(gòu)是 { "name": "John Doe", "age": 30}
        // 提取數(shù)據(jù)并展示
        var userInfo = response.data;
        document.getElementById('name').textContent = 'Name: ' + userInfo.name;
        document.getElementById('age').textContent = 'Age: ' + userInfo.age;
      })
      .catch(function (error) {
        // 請(qǐng)求失敗時(shí)的處理
        console.error('GET Error:', error);
      });
  </script>

  <!-- 展示用戶信息 -->
  <div id="name"></div>
  <div id="age"></div>
</body>
</html>

三、使用上下文處理器：

Django的上下文處理器允許在每個(gè)模板中自動(dòng)包含特定的數(shù)據(jù)?？梢栽贒jango的配置文件（settings.py）中定義一個(gè)上下文處理器，并將其添加到TEMPLATES的context_processors列表中。這樣在每個(gè)模板中就可以直接使用該數(shù)據(jù)。

# 在settings.py中定義一個(gè)上下文處理器
def my_context(request):
    return {'name': 'John', 'age': 30}

# 將上下文處理器添加到TEMPLATES的context_processors列表中
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'myapp.context_processors.my_context',  # 添加自定義上下文處理器
            ],
        },
    },
]

然后在模板中就可以直接使用{{ name }}和{{ age }}訪問(wèn)這些數(shù)據(jù)。