快捷導(dǎo)航

Django 前后臺(tái)的數(shù)據(jù)傳遞的方法

更新時(shí)間：2017年08月08日 16:39:34 作者：psklf

本篇文章主要介紹了Django 前后臺(tái)的數(shù)據(jù)傳遞的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Django 從后臺(tái)往前臺(tái)傳遞數(shù)據(jù)時(shí)有多種方法可以實(shí)現(xiàn)。

最簡(jiǎn)單的后臺(tái)是這樣的：

from django.shortcuts import render

def main_page(request):
  return render(request, 'index.html')

這個(gè)就是返回index.html的內(nèi)容，但是如果要帶一些數(shù)據(jù)一起傳給前臺(tái)的話，該怎么辦呢？

一 view -> HTML 使用Django模版

這里是這樣：后臺(tái)傳遞一些數(shù)據(jù)給html，直接渲染在網(wǎng)頁(yè)上，不會(huì)有什么復(fù)雜的數(shù)據(jù)處理（如果前臺(tái)要處理數(shù)據(jù)，那么就傳數(shù)據(jù)給JS處理）

Django 代碼：

from django.shortcuts import render

def main_page(request):
  data = [1,2,3,4]
  return render(request, 'index.html', {'data': data})

html使用 {{ }} 來(lái)獲取數(shù)據(jù)

<div>{{ data }}</div>

可以對(duì)可迭代的數(shù)據(jù)進(jìn)行迭代：

{% for item in data%}
<p>{{ item }}</p>
{% endfor %}

該方法可以傳遞各種數(shù)據(jù)類型，包括list，dict等等。

而且除了 {% for %} 以外還可以進(jìn)行if判斷，大小比較等等。具體的用法讀者可以自行搜索。

二 view-> JavaScript

如果數(shù)據(jù)不傳給html用，要傳給js用，那么按照上文的方式寫會(huì)有錯(cuò)誤。

需要注意兩點(diǎn)：

1.views.py中返回的函數(shù)中的值要用 json.dumps() 處理

2.在網(wǎng)頁(yè)上要加一個(gè) safe 過(guò)濾器。

代碼：

views.py

# -*- coding: utf-8 -*-
 
import json
from django.shortcuts import render
 
def main_page(request):
  list = ['view', 'Json', 'JS']
  return render(request, 'index.html', {
      'List': json.dumps(list),
    })

JavaScript部分：

var List = {{ List|safe }};

三 JavaScript Ajax 動(dòng)態(tài)刷新頁(yè)面

這個(gè)標(biāo)題的意思是：網(wǎng)頁(yè)前臺(tái)使用Ajax發(fā)送請(qǐng)求，后臺(tái)處理數(shù)據(jù)后返回?cái)?shù)據(jù)給前臺(tái)，前臺(tái)不刷新網(wǎng)頁(yè)動(dòng)態(tài)加載數(shù)據(jù)

Django 代碼：

def scene_update_view(request):
  if request.method == "POST":
      name = request.POST.get('name')
      status = 0
      result = "Error!"
      return HttpResponse(json.dumps({
        "status": status,
        "result": result
      }))

JS 代碼：

    function getSceneId(scece_name, td) {
      var post_data = {
        "name": scece_name,
      };

      $.ajax({
        url: {% url 'scene_update_url' %},
        type: "POST",
        data: post_data,
        success: function (data) {
          data = JSON.parse(data);
          if (data["status"] == 1) {
            setSceneTd(data["result"], scece_name, td);
          } else {
            alert(data["result"]);
          }
        }
      });
    }

JS 發(fā)送ajax請(qǐng)求，后臺(tái)處理請(qǐng)求并返回status, result

在 success: 后面定義回調(diào)函數(shù)處理返回的數(shù)據(jù)，需要使用 JSON.parse(data)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。