zoukankan      html  css  js  c++  java
  • Django 前后台的数据传递

    Django 前后台的数据传递

    严正声明:
    作者:psklf
    出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html
    欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;否则必究法律责任!
     

    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)


    参考资料:

    Django 基础教程

     
     
    分类: Web
     
    好文要顶 关注我 收藏该文
    4
    0
     
     
     
    « 上一篇:如何配置远程mysql服务器
    » 下一篇:JavaScript 解析 Django Python 生成的 datetime 数据 时区问题解决
    posted @ 2016-05-30 15:25 皮斯卡略夫 阅读(10247) 评论(11) 编辑 收藏

     
     
    #1楼 2016-08-04 15:58 logicalsky  
    ajax传一个数据给view,view根据这个数据从数据库查出一些数据让前台显示,这时是不是不能用{{ xx }}来获取查询到的数据???
    http://pic.cnblogs.com/face/995017/20160719165946.png
    #2楼[楼主] 2016-08-05 10:00 皮斯卡略夫  
    @ logicalsky
    引用ajax传一个数据给view,view根据这个数据从数据库查出一些数据让前台显示,这时是不是不能用{{ xx }}来获取查询到的数据???

    ajax的请求一般来说是发给一个新的view来处理 而不是渲染当前页面的这个view

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

    就是渲染页面的view

    这个
    1
    2
    3
    4
    5
    6
    7
    8
    9
    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
                }))

    就是处理ajax的view

    是两个view的話,用ajax返回数据即可
  • 相关阅读:
    java线程管理
    java进程间通信
    Possible multiple enumeration of IEnumerable
    Adding Search
    Working with SQL Server LocalDB
    ASP.NET Razor
    ASP.NET Razor
    modelstate.isvalid false
    Razor Intro
    open Command window here
  • 原文地址:https://www.cnblogs.com/honey01/p/7274174.html
Copyright © 2011-2022 走看看