Django 前后台的数据传递的方法

Django 从后台往前台传递数据时有多种方法可以实现。

最简单的后台是这样的:

from django.shortcuts import render

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

这个就是返回index.html的内容,但是如果要带一些数据一起传给前台的话,该怎么办呢?

一 view -> HTML 使用Django模版

这里是这样:后台传递一些数据给html,直接渲染在网页上,不会有什么复杂的数据处理(如果前台要处理数据,那么就传数据给JS处理)

Django 代码:

from django.shortcuts import render

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

html使用 {{ }} 来获取数据

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

可以对可迭代的数据进行迭代:

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

该方法可以传递各种数据类型,包括list,dict等等。

而且除了 {% for %} 以外还可以进行if判断,大小比较等等。具体的用法读者可以自行搜索。

二 view-> JavaScript

如果数据不传给html用,要传给js用,那么按照上文的方式写会有错误。

需要注意两点:

1.views.py中返回的函数中的值要用 json.dumps() 处理

2.在网页上要加一个 safe 过滤器。

代码:

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 动态刷新页面

这个标题的意思是:网页前台使用Ajax发送请求,后台处理数据后返回数据给前台,前台不刷新网页动态加载数据

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 发送ajax请求,后台处理请求并返回status, result

在 success: 后面定义回调函数处理返回的数据,需要使用 JSON.parse(data)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Django 前后台的数据传递的方法

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): return render(request, 'index.html') 这个就是返回index.html的内容,但是如果要带一些数据一起传给前台的话,该怎么办呢? 一 view -> HTML 使用Django模版 这里是这样:后台传递一些数据给html,直接渲染在网页上,不会有什么复杂的数据处

  • Android开发之利用Intent实现数据传递的方法

    本文实例讲述了Android利用Intent实现数据传递的方法.分享给大家供大家参考,具体如下: 在Android开发过程中,很多人都熟悉Intent,这是个用于在多个View之间共享数据的类.本节主要讲述通过点选ListView中的文本,把文本中的URL加载到一个新的页面上,并且打印出来.为了方便,我先把前面一篇<Android开发之利用jsoup解析HTML页面的方法>的代码重新贴一下,因为在上一节后,代码做了少许修改: try { doc = Jsoup.parse(new URL(&q

  • Android基于Intent实现Activity之间数据传递的方法

    本文实例讲述了Android基于Intent实现Activity之间数据传递的方法.分享给大家供大家参考,具体如下: MainActivity: package com.test.intentdemo; import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.view.Menu; import andro

  • Android实现Activities之间进行数据传递的方法

    本文实例讲述了Android实现Activities之间进行数据传递的方法.分享给大家供大家参考.具体分析如下: 首先,先说明一下Activity的启动及关闭: 1. startActivity(Intent intent);  启动Activity        finish();  结束当前Activity 2. startActivityForResult(Intent intent, int requestCode);  以指定的请求码requestCode启动Activity fini

  • 详解vue 数据传递的方法

    组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值 组件实例的作用域是孤立的.这意味着不能在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 子组件: 子组件需要从父组件获取 logo 的值,就需要使用 props: ['logo'] 父组件: 2.子组件向父组件传值 子组件主要通过事件传递数据给父组件. 子组件:

  • vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个"子类",Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click=&

  • Django 批量插入数据的实现方法

    项目需求:浏览器中访问django后端某一条url(如:127.0.0.1:8080/get_book/),实时朝数据库中生成一千条数据并将生成的数据查询出来,并展示到前端页面 views.py from django.shortcuts import render, HttpResponse, redirect from app01 import models def get_book(request): # for循环插入1000条数据 for i in range(1000): model

  • Android Activity之间的数据传递方法总结

    前言 在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间数据的传递方法. 1.通过 Intent 传递 我们在进行 Activity 跳转时,是要有 Intent,此时 Intent 是可以携带数据的,我们可以利用它将数据传递给其它Activity.Intent 应该是系统提供的支持类型最广,功能最全面的传递方式了.基本数据类型.复杂数据类型(如数组.集合).自定义数据类型等等都能支持,而且使用起来也不复杂.下面将通过几

随机推荐