python中django,tornado框架中各种地址的引用的正确方法

本文介绍如何在Django框架中将数据从后端传递到前端JavaScript，包括使用JSON序列化和Django模板的safe过滤器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Django传递数据给JS

« Django session

Django Ajax »

有时候我们想把一个 list 或 dict等 JSON对象传到网页的 javascript，用 JS 进行处理，比如用 js 将数据可视化显示到网页上。

请注意：如果不需要处理，直接显示到网页上，用Django模板就可以了，请看前面的教程。

这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

这种请问详见 Django Ajax 一节的内容。

二，直接在视图函数（views.py中的函数）中将 JSON对象和网页其它内容一起传递到Django模板（一次性地渲染，还是同一次请求）。

请看下面的示例：

views.py

1

2

3

4

5

6

7

 
      from  
      __future__  
      import  
      unicode_literals 
     
      from  
      django.shortcuts  
      import  
      render 
     
      def  
      home(request): 
     
      List  
      =  
      [ 
      '自强学堂' 
      ,  
      '渲染Json到模板' 
      ] 
     
      return  
      render(request,  
      'home.html' 
      , { 
      'List' 
      :  
      List 
      })

home.html 中的一部分

1

2

3

4

 
      < 
      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 核心部分：

1

2

3

4

 
      //列表 
     
      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 
      > 
     
       tornado============================================================================================= 
     
 Tornado源码分析 --- Redirect重定向 
      
“重定向”简单介绍：　　“重定向”指的是HTTP重定向，是HTTP协议的一种机制。当client向server发送一个请求，要求获取一个资源时，在server接收到这个请求后发现请求的这个资源实际存放在另一个位置，于是server在返回的response中写入那个请求资源的正确的URL，并设置reponse的状态码为301（永久）或者 302（暂时），当client接受到这个response后就会根据新的URL重新发起请求。重定向有一个典型的特症，即，当一个请求被重定向以后，最终浏览器上显示的URL往往不再是开始时请求的那个URL了。这就是重定向的由来。
 
下面我们先看Redirect的源码，之后分析完源码后可以更好的理解其用法。
Tornado Redirect源码分析：　　在 web.py 中发现有俩个地方实现了重定向的机制:
　　1. 基类 RequestHandler 中定义的 self.redirect: 
           
 1 def redirect(self, url, permanent=False, status=None):
 2     if self._headers_written:
 3         raise Exception("Cannot redirect after headers have been written")
 4     if status is None:
 5         status = 301 if permanent else 302
 6     else:
 7         assert isinstance(status, int) and 300 <= status <= 399
 8     self.set_status(status)
 9     self.set_header("Location", utf8(url))
10     self.finish() 
           
　　先看传入进来的参数：
url：重定向后所返回的新的URL地址
permanent：默认为False，表示该重定向为临时性的；如果为True，则该重定向为永久性。
status：当status被指定了值的话，那个该值将会作为HTTP返回给客户端的状态码；如果没有指定特定的值，那么根据上方的permanent状态，如果permanent为True，则该status返回301；如果permanent为False，则该status返回302。
　　注： 默认值为302。
　　分析：
通过检测 self._headers_written 的值，来判断是否该请求已经被返回给了客户端：                                                                                                                                                                                                                                                在 基类 RequestHandler 的初始化中，self._headers_written = False，之后如果当前输出的缓冲区已经flush到了网络的时候，函数 def flush() 中会将 self._headers_written = True。所以此时头信息headers已经别写入了请求且已经返回给了客户端，是无法进行重定向了。
status状态码默认为302，除非permanent参数为True（永久重定向）才会返回301。如果status指定了特定的值的话，那么对指定的值进行数据类型判断，并且status的范围为 300~399，否则会返回异常。
写入状态信息，以及 字段“Location” （用来重定向接收方到非请求URL的位置来完成请求或标识新的资源）的值
调用 finish() ，完成该HTTP请求。
　　2. 类 RedirectHandler实现的重定向：  
           
1 class RedirectHandler(RequestHandler):
2     def initialize(self, url, permanent=True):
3          self._url = url
4          self._permanent = permanent
5  
6     def get(self, *args):
7          self.redirect(self._url.format(*args), permanent=self._permanent) 
           
　　介绍和用法：
重定向客户端的GET请求到给定的URL。
需要提供关键参数URL传入该处理类中，例如：
 
         1 application = web.Application([
2     (r"/oldpath", web.RedirectHandler, {"url": "/newpath"}),
3 ]) 
        
　　　在Application中调用该 RedirectHandlerf方法，给定参数“url”，其会将 地址’/oldpath‘ 重定向到 ’/newpath‘ 中。
该类也支持对重定向URL地址进行正则表达式匹配，例如为了实现交换第一个和第二个参数部分，同事保留其余部分不变：　
 
         1 application = web.Application([
2     (r"/(.*?)/(.*?)/(.*)", web.RedirectHandler, {"url": "/{1}/{0}/{2}"}),
3 ]) 
        
　　　最终的URL可以使用格式化方法： str.format，子串会被捕获然后进行对应的匹配。在上面的例子中，一个 “a/b/c” 的请求能够被格式化，如下：　　　
 
         str.format("/{1}/{0}/{2}", "a", "b", "c")  # -> "/b/a/c" 
        
　　源码分析：
通过 initiaialize() 函数进行参数 URL， permanent 的初始化。permanent初始化为True，则该重定向为永久化的。
定义 get() 函数，调用 基类中定义的 self.redirect 进行重定向的处理。
 
两种重定向方法的比较和思考：　　对于两种方法中的 permanent 参数，类 RedirectHandler 中默认为True（永久性重定向301）；self.redirect中默认为False（临时性重定向302）；
　　原因：self.redirect 多数情况下被用于用户自定义的情况下进行重定向操作（例如环境变更、用户认证、以及表单提交）,所以其默认为临时的重定向。类RedirectHandler 是每次匹配到该请求URL的时候就触发重定向。