zoukankan      html  css  js  c++  java
  • Python基础之Flask快速入门2

    通过上一篇文章的快速入门,实现了Python利用Flask框架搭建web项目的基本内容,本文将进一步介绍如何通过jQuery实现Flask项目的异步刷新,以达到局部更新的目的,仅供学习分享使用,如有不足之处,还请指正。

    什么是Ajax?

    Ajax是Asynchronous JavaScript and Xml的简称,通过Ajax向服务器发送请求,接收服务器返回的json数据,然后使用javascript修改页面来实现页面数据的局部刷新。AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。使用jQuery框架可方便的编写ajax代码,需要jQuery.js文件。

    jQuery下载

    jQuery可以通过官网进行下载,在开发过程中,为便于调试,可下载开发版。如下所示:

    创建模板

    在下载完jQuery后,将其拷贝到static/js目录下,然后创建模板文件ajax.html,如下所示:

     ajax.html文件中调用jQuery创建ajax,然后更新页面,如下所示:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>异步刷新页面</title>
     6     <script src="../static/js/jquery-3.6.0.js"></script>
     7     <script type="text/javascript">
     8         $(document).ready(function () {
     9             $("#btn_ajax").click(function () {
    10                 $.ajax({
    11                     url: "/ajax_data",
    12                     type: "post",
    13                     data: {"name": "李四", "score": 99},
    14                     success: function (data) {
    15                         $("h1").html("中国加油>>" + data);
    16                     },
    17                     error: function (data) {
    18                         alert("发送ajax失败!");
    19                     }
    20 
    21                 })
    22             });
    23         });
    24     </script>
    25 </head>
    26 <body>
    27 <h1>局部刷新</h1>
    28 <input id="btn_ajax" type="button" value="点我有惊喜"/>
    29 </body>
    30 </html>

    其中ajax_data为指定路由,主要用于获取数据,如下所示:

     注意:一般默认情况下,flask路由只支持get方式,为支持post方式,需要显示声明。

    启动服务

    启动flask服务,在浏览器中进行访问,初始化加载时如下所示:

     点击按钮后,通过ajax调用后端服务,成功后,刷新页面,实现局部刷新功能,如下所示:

    以上就是Python利用flask及jQuery实现异步刷新的方法,旨在抛砖引玉,分析分享。

    字符串格式化

    字符串的格式化方法分为两种,分别为占位符(%)和format方式。占位符方式在Python2.x中用的比较广泛,随着Python3.x的使用越来越广,format方式使用的更加广泛。

    占位符(%)方式

    1 name = '小王'
    2 age = 20
    3 score = 100
    4 country = '中国'
    5 print("我的名字叫%s我的年龄是%d我的分数是%d我的祖国是%s" % (name, age, score, country))

    占位符还可以通过字典的方式进行匹配,如下所示:

    1 print("我的名字叫%(name)s我的年龄是%(age)d我的分数是%(score)d我的祖国是%(country)s" % (
    2     {"name": name, "age": age, "score": score, "country": country}))

    输出结果如下所示:

    format方式

    1 name = '小王'
    2 age = 20
    3 score = 100
    4 country = '中国'
    5 print("我的名字叫{}我的年龄是{}我的分数是{}我的祖国是{}".format(name, age, score, country))  # 默认1对1,多1不可,缺1不可
    6 print("我的名字叫{0}我的年龄是{1}我的分数是{2}我的祖国是{3}".format(name, age, score, country))  # 通过位置找出替换目标及插入的参数
    7 print("我的名字叫{name}我的年龄是{age}我的分数是{score}我的祖国是{country}".format(name=name, age=age, score=score,
    8                                                                country=country))  # {}通过关键字找出替换目标及插入的参数

    以上几种format方式,输出结果一致,如下所示:

    插值法 

    在Python 3.6以后,还提供了插值法,实现格式化,如下所示:

    1 name = '小王'
    2 age = 20
    3 score = 100
    4 country = '中国'
    5 print(f"我的名字叫{name}我的年龄是{age}我的分数是{score}我的祖国是{country}")

    输出结果也是一样的,如下所示:

    备注

    长相思·其一

    【作者】李白 【朝代】唐

    长相思,在长安。

    络纬秋啼金井阑,微霜凄凄簟色寒。孤灯不明思欲绝,帷望月空长叹。美人如花隔云端!

    上有青冥之长天,下有渌水之波澜。天长路远魂飞苦,梦魂不到关山难。

    长相思,摧心肝!


    作者:Alan.hsiang
    出处:http://www.cnblogs.com/hsiang/
    本文版权归作者和博客园共有,写文不易,支持原创,欢迎转载【点赞】,转载请保留此段声明,且在文章页面明显位置给出原文连接,谢谢。
    关注个人公众号,定时同步更新技术及职场文章

  • 相关阅读:
    强大的代码生成工具MyGeneration
    代码自动生成工具MyGeneration之一(程序员必备工具)
    DotNET 开发常用工具汇集
    33条C#、.Net经典面试题目及答案
    TestDriven.NET – 快速入门
    HALCON 简介
    sparkSQL将谓词推入kudu引擎
    使用sparkSQL的insert操作Kudu
    spark操作Kudu之写
    spark操作Kudu之读
  • 原文地址:https://www.cnblogs.com/hsiang/p/15312544.html
Copyright © 2011-2022 走看看