Django傳遞資料給JS

阿新 • • 發佈：2018-12-17

有時候我們想把一個 list 或 dict等 JSON物件 傳到網頁的 javascript，用 JS 進行處理，比如用 js 將資料視覺化顯示到網頁上。

請注意：如果不需要處理，直接顯示到網頁上，用Django模板就可以了，請看前面的教程。

這裡講述兩種方法：

一，頁面載入完成後，在頁面上操作，在頁面上通過 ajax 方法得到新的資料（再向伺服器傳送一次請求）並顯示在網頁上，這種情況適用於頁面不重新整理的情況下，動態載入一些內容。比如使用者輸入一個值或者點選某個地方，動態地把相應內容顯示在網頁上。

二，直接在檢視函式（views.py中的函式）中將 JSON物件和網頁其它內容一起傳遞到Django模板（一次性地渲染，還是同一次請求

）。

請看下面的示例：

views.py

from __future__ import unicode_literals

from django.shortcuts import render

def home(request):

List = ['自強學堂', '渲染Json到模板']

return

render(request, 'home.html', {'List': List})

home.html 中的一部分

<script type="text/javascript">

var List = {{ List }};

alert(List);

</script>

需要注意的是，我們如果直接這麼做，傳遞到 js 的時候，網頁的內容會被轉義，得到的格式會報錯。

訪問時會得到 Uncaught SyntaxError: Unexpected token ILLEGAL

需要注意兩點：

1. 檢視函式中的字典或列表要用 json.dumps()處理。

2. 在模板上要加 safe 過濾器。

views.py

# -*- coding: utf-8 -*-

from __future__ import unicode_literals

import json

from django.shortcuts import render

def home(request):

List = ['自強學堂', '渲染Json到模板']

Dict = {'site': '自強學堂', 'author': '塗偉忠'}

return render(request, 'home.html', {

'List': json.dumps(List),

'Dict': json.dumps(Dict)

})

home.html 只給出了 js 核心部分：

//列表

var List = {{ List|safe }};

//字典

var Dict = {{ Dict|safe }};

如果你對 js 比較熟悉，到此為止，後面的不用看了。

如果不太熟悉，可以參考下面的更詳細的程式碼。

html 完全程式碼及完整程式碼下載（最後面）：

<!DOCTYPE html>

<html>

<head>

<title>歡迎光臨自強學堂！</title>

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<div id="list"> 學習 </div>

<div id='dict'></div>

<script type="text/javascript">

//列表

var List = {{ List|safe }};

//下面的程式碼把List的每一部分放到頭部和尾部

$('#list').prepend(List[0]);

$('#list').append(List[1]);

console.log('--- 遍歷 List 方法 1 ---')

for(i in List){

console.log(i);// i為索引

}

console.log('--- 遍歷 List 方法 2 ---')

for (var i = List.length - 1; i >= 0; i--) {

// 滑鼠右鍵，稽核元素，選擇 console 可以看到輸入的值。

console.log(List[i]);

};

console.log('--- 同時遍歷索引和內容，使用 jQuery.each() 方法 ---')

$.each(List, function(index, item){

console.log(index);

console.log(item);

});

// 字典

var Dict = {{ Dict|safe }};

console.log("--- 兩種字典的取值方式 ---")

console.log(Dict['site']);

console.log(Dict.author);

console.log("--- 遍歷字典 ---");

for(i in Dict) {

console.log(i + Dict[i]);//注意，此處 i 為鍵值

}

</script>

</body>

</html>

Django傳遞資料給JS

有時候我們想把一個 list 或 dict等 JSON物件傳到網頁的 javascript，用 JS 進行處理，比如用 js 將資料視覺化顯示到網頁上。請注意：如果不需要處理，直接顯示到網頁上，用Django模板就可以了，請看前面的教程。這裡講述兩種方法：一，頁面載入完

React Native之js呼叫Android原生使用Callback傳遞結果給js

1 問題上面的文章只是呼叫安卓原生顯示Toast,但是我們一般會需要呼叫安卓的程式碼然後去拿回結果給js,但是我們知道在android層js呼叫的這個函式返回值必須的void,所以我們需要用到Callback,Callback一般用於同步,也就是說直接呼叫

Web動態伺服器-2-傳遞資料給應用

#coding=utf-8 import socket import sys from multiprocessing import Process import re class WSGIServer(object): addressFamily = socket.AF_INET

Android網路程式設計之傳遞資料給伺服器（二）

我曾在《Android網路程式設計之傳遞資料給伺服器(一) 》一文中介紹瞭如何通過GET方式傳遞資料給伺服器，通過GET方式傳遞資料主要適用於資料大小不超過2KB，且對安全性要求不高的情況下。下面就介紹通過POST方式傳遞資料主到伺服器。一、通過P

vue中props（父組傳遞資料給子元件）的使用

通過props關鍵字可以傳遞字串、數字、布林、陣列、物件、函式方式一：在子元件中用 props關鍵字，後面的每個資料表示的是父元件給子元件要傳遞的值，其值的資料型別由父元件定義 props: ['isShowDialog', 'ste

vue中子元件傳遞資料給父元件

傳送者： modifyName：是接受者的鍵，也就是傳送和接收的唯一標識 itemObj：是一個物件 this.$emit("modifyName",this.itemObj); 接受者： <common-table 是一個自定義元

通過GET方式傳遞資料給伺服器

1.web服務端的建立建立Dynamic Web Project，名稱為ServerGET 2.新建servlet 自動生成的ServerGET.java中有 @WebServlet(“/

父元件向子元件傳遞資料(vue.js)

父元件: app.vue 子元件: header.vue 子元件: <template> <div> <!-- logo 是在data中(父元件)定義的變數

Java通過Json傳遞資料給JavaScript

<%@ page contentType = "text/html;charset=UTF-8" language = "java" %> <%@ page import="net.

android原生webview中呼叫JS方法並傳遞引數給JS遇到的問題

在使用webview時，需要給JS傳遞一個引數，之前前端同事把JS方法內容和html內容分離了，所以在使用下面的方法的時候一直顯示方法未定義[INFO:CONSOLE(1)] "Uncaught ReferenceError: load is not defined", s

ionic,使用push開啟子頁面，子頁面傳遞資料給父頁面！！！！！！

找了一天終於搞好了父頁面程式碼片段，不要懷疑// 打開個人資訊 openCreatPersoninfo() { new Promise((resolve, reject) => { this.navCtrl.push('UserInfomation',

react native 子控制元件傳遞資料給父控制元件

/** * Created by fanxiaole on 17/3/24. * 需求在子控制元件(select)中選擇性別在父控制元件(form)中獲取這個值並提交 * */ //步驟 //1.建立父控制元件(form) 並新增子控制元件同時利用

Native和html5的互動（二）Android native傳資料給js

js裡面某函式用來接收android傳過來的資料 function onDeviceScanResult(data) { alert("Device Scan Result:" + data); } Android裡面把資料拼接成字串發給js ta); }W

JSP傳遞陣列給JS的方法

由於JSP頁面的陣列無法直接傳到JS。所以採用以下方法來獲取陣列。<% String[] title = { "姓名 ", "學號 ", "性別 ", "年齡 "}; %

vue.js父元件給子元件傳遞資料

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script t

python學習-- Django傳遞數據給JS

傳遞 django mage image 分享圖片 pre nbsp 圖片 alt var List = {{ List|safe }};//safe 必須存在 python學習-- Django傳遞數據給JS

django form表單驗證，使用Ajax提交併返回提示資訊（JSON傳遞資料）

直接上程式碼: HTML，由Form外掛自動生成input標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax提交

微信小程式與 Django伺服器資料流傳遞

Django伺服器解析小程式傳送的json二進位制字串 https://blog.csdn.net/qq_25068917/article/details/81041048 http://www.cnblogs.com/Liang-jc/p/9326680.html

js實現父視窗和子視窗傳遞資料

js實現父視窗和子視窗傳遞資料 1.test.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父視窗</title> <sc

django專案培訓站-26-模板分離與繼承--模板向上傳遞資料-模板頁識別媒體路徑

7-1-模板分離主頁與繼承頁製作-修改一個標題模板分離主頁，建立base.html頁，名字隨意定義可變塊 block ... endblock 繼承頁中引用主頁 extends 'base.html' 替換區塊內容 block title

Django傳遞資料給JS

相關推薦