V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
schema
V2EX  ›  Python

Flask+Ajax 的模板如何添加按钮,点击后刷新局部页面

  •  
  •   schema · 2017-08-26 10:31:27 +08:00 · 6642 次点击
    这是一个创建于 2648 天前的主题,其中的信息可能已经有所发展或是发生改变。

    基本情况: 最近折腾 Flask,学着做了一个小项目练手。会用简单的 html+css,不会 js

    app.py 文件内容如下:

    # app.py
    import random
    from flask import Flask, render_template
    
    app = Flask(__name__)
    
    ### One douban film short comment ###
    ### random output ###
    @app.route("/", methods=["GET"])
    def index():
        return render_template("index.html")
    
    @app.route("/douban", methods=['GET'])
    def Comment():
        with open('douban.txt', 'r') as f:
            lines = f.readlines()
            num = random.choice(range(len(lines)))
            return lines[num]
    
    if __name__ == "__main__":
        app.run()
    
    

    模板文件夹 templates 下 index.html 文件内容如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Flask</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    
    <body>
        <div id="comment"></div>
        <script>
            $.get('/douban').done(function (data) {
                var para=document.createElement("p");
                var node=document.createTextNode(data);
                para.appendChild(node);
                var element=document.getElementById("comment");
                element.appendChild(para);
            });
        </script>
    </body>
    </html>
    

    现在可以做到的是,按 F5,首页会重新加载一条豆瓣电影短评,但这样不太方便。

    所以我想如果在页面内添加一个刷新按钮,点击后 局部刷新 <div id="comment"> 会好很多,请问该怎么做呢

    P.S 附上 douban.txt

    11 条回复    2017-08-30 15:43:11 +08:00
    111111111111
        1
    111111111111  
       2017-08-26 10:57:49 +08:00 via Android
    了解一下 ajax
    LeeSeoung
        2
    LeeSeoung  
       2017-08-26 11:02:15 +08:00
    加一个 button 添加 onclick 事件,发请求,在回调里刷新页面元素。
    schema
        3
    schema  
    OP
       2017-08-26 11:07:46 +08:00
    @LeeSeoung 能不能写下
    loading
        4
    loading  
       2017-08-26 11:18:28 +08:00
    《锋利的 jQuery 》,去买一本看吧。
    Kilerd
        5
    Kilerd  
       2017-08-26 11:51:47 +08:00 via iPhone
    楼上都给出思路了,还想要具体代码?😷
    pipapa
        6
    pipapa  
       2017-08-26 12:34:01 +08:00
    前端后端分离,发送 post 请求,异步刷新
    dong3580
        7
    dong3580  
       2017-08-26 13:39:39 +08:00 via Android
    你都说了是 Ajax,先去了解一下何为 Ajax,
    fatears
        8
    fatears  
       2017-08-26 20:37:46 +08:00 via iPad
    都引入 jquery 了为什么还用原生 js 来写
    schema
        9
    schema  
    OP
       2017-08-26 21:42:49 +08:00 via Android
    收藏倒不少了。。。搞不懂 💤
    TJT
        10
    TJT  
       2017-08-27 16:12:52 +08:00
    套个 iframe,然后 reload 这个 iframe 就好了,简单快捷 (滑稽
    kitar
        11
    kitar  
       2017-08-30 15:43:11 +08:00
    <button onclick="newMonitorModal(0)">新建调度</button>

    function newMonitorModal(id_) {
    $('#modal-content').html("");
    $.get(
    "{{ url_for('mt.NewMonitor') }}",
    {
    id: id_
    },
    function (response) {
    $('#modal-content').html(response);
    }
    }
    );
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4101 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 10:19 · PVG 18:19 · LAX 02:19 · JFK 05:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.