需求：

flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面

用到 setTimeout方法，setTimeout(function(){},1000)；setTimeout 中的 function 为第二次请求 就可以了

效果如图：请求了二个接口，间隔5秒，展示在同一页面

html：test.html

 <html>

 <head></head>

 <body>

 <div class="header">

     <h4>标题XXX</h4>

 </div>

 <div class="body">

     <form class="form" method="post">

         <br class="form-a"/>

         <div class="form-b">

             <label for="aaa">&nbsp;&nbsp;&nbsp;&nbsp;XXX:&nbsp;&nbsp; <input class="form-control1" type="a" id="a"

                                                                              name="a" maxlength="11"

                                                                              placeholder="请输入XXX"/> </label>

         </div>

         <div class="box">

             <label>&nbsp;XXXX:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

             <label class="radio"> <input type="radio" id="b" name="b" value="0" checked=""/><span>b1</span> </label>

             <label class="radio"> <input type="radio" id="b" name="b" value="1"/><span>b2</span> </label>

         </div>

         <br/>

         <div class="form">

             &nbsp;&nbsp;&nbsp;&nbsp;

             <button class="btn btn-primary" type="button" id="notify">查询</button>

         </div>

     </form>

 </div>

 <div class="c" id="show2" style="display:none">

     <div class="header">

         <h4>结果：</h4>

     </div>

     <div class="body" id="show3">

     </div>

     </div>

     <div class="body" id="show4">

     </div>

 </div>

 </body>

 // static 根据自己实际路径填写

 <script type="text/javascript" src="static/js/main.min.js"></script>

 <script type="text/javascript" src="static/js/jquery.min.js"></script>

 <script type="text/javascript">

     // 消息提示

     $('#notify').on('click', function () {

         // ajax

         var b = $("input[name='b']:checked").val();

         var a = $("input[name='a']").val();

         var data = {

             data: JSON.stringify({

                 'b': b,

                 'a': a

             }),

         }

         if (a.length = 0) {

             alert('XXXXX不能为空');

             return;

         }

         $.ajax({

             type: "POST",

             dataType: "json",

             url: "/test1",//调用后台test1方法

             data: data,

             success: function (result) {

                 console.log(result);

                 {

                     $('#show2').show() //此处展示

                     $("#show3").html(result)

                     setTimeout(function () {

                         $.ajax({

                         type: "POST",

                         dataType: "json",

                         url: "/test2",//调用后台test2方法

                         data: data,

                         success: function (result) {

 {#                            console.log('11111')#}

                             console.log(result);

                             {

                                 $("#show4").html(result)

                             }

                         },

                         error: function (result) {

 {#                            console.log(result);//#}

                             {

                                 alert(result);

                             }

                         }

                     });

                     },5000) // 间隔5秒

                 }

             },

             error: function (result) {

 {#                console.log(result);//#}

                 {

                     alert(result);

                 }

             }

         });

     })

 </script>

 </html>

flask：

 # 页面

 @app.route('/test',methods=['GET','POST'])

 def test():

     return render_template("test/test.html")

 # test1

 @app.route('/test112',methods=['GET','POST'])

 def test112():

     data = json.loads(request.form.get('data'))

     b = data['b']

     a = data['a']

     res = b,a

     return jsonify(res)

 # test2

 @app.route('/test2',methods=['GET','POST'])

 def test113():

     data = json.loads(request.form.get('data'))

     b = data['b']

     a = data['a']

     res = a

     return jsonify(res)

flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面的更多相关文章

  1. flask中使用ajax 处理前端请求，每隔一段时间请求一次

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求一次,并展示在页面 使用 setInterval(function(){},1000)方法 结果展示: html:(test.html) ...

  2. flask中使用ajax 处理前端请求 弹框展示

    菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了 html: <html> <head></head ...

  3. flask中使用ajax 处理前端请求，结果展示在同一页面，不点击页面不展示

    在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果:与上一篇大同小异,需要在 html.flask.js微调 效果展示: (未点击查询) (点击查询) html: <html> ...

  4. 查看flask中所有的路由信息（同时查看/设置允许的请求方式get、post）

    查看flask中所有的路由信息(同时查看/设置允许的请求方式get.post) # -*- coding: utf-8 -*- from flask import Flask app = Flask( ...

  5. delphi中我用定时器每隔一段时间执行操作

    delphi中,我用定时器每隔一段时间执行数据库插入及更新工作!adoquery.close;adoquery.sql.cleare;adoquery.connection:=con1;adoquer ...

  6. TensorFlow实现Softmax Regression识别手写数字中"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败”问题

    出现问题: 在使用TensorFlow实现MNIST手写数字识别时,出现"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应 ...

  7. flask中的简单的前端写入

    那么flask这个框架是web开发,那么肯定离不开前端的一些代码,那么python用的web开发框架 开发所用的前端模板就是jinja2模板.相对于jinja1比起来性能做到了很大的提升,那么Vue一 ...

  8. C#中通过调用Dll函数时，执行一段时间后，就会报内存可能被破坏的错的解决办法

    遇到同样的问题,已经解决的:http://blog.csdn.net/youxiazzz12/article/details/24313347

  9. TLS 改变密码标准协议(Change Cipher Spec Protocol) 就是加密传输中每隔一段时间必须改变其加解密参数的协议

    SSL修改密文协议的设计目的是为了保障SSL传输过程的安全性,因为SSL协议要求客户端或服务器端每隔一段时间必须改变其加解密参数.当某一方要改变其加解密参数时,就发送一个简单的消息通知对方下一个要传送 ...

随机推荐

  1. Spark 基础操作

    1. Spark 基础 2. Spark Core 3. Spark SQL 4. Spark Streaming 5. Spark 内核机制 6. Spark 性能调优 1. Spark 基础 1. ...

  2. Python中关于Lambda函数的使用总结

    lambda表达式是一种匿名函数,对应python中的自定义函数def,是定义某个函数时比较高级的一种写法.作为python初学者,本文整理了lambda的一些基本用法和特点. lambda和def的 ...

  3. k8s 证书反解

    k8s证书反解 1.将k8s配置文件(kubelet.kubeconfig)中client-certificate-data:内容拷贝 2.echo "client-certificate- ...

  4. docker 实践七：docker-machine

    本篇是关于 docker 三剑客中的 docker machine. 注:环境为 CentOS7,docker 19.03. docker-machine 是 docker 官方三剑客项目之一,它是一 ...

  5. S04_CH02_工程移植ubuntu并一键制作启动盘

    S04_CH02_工程移植ubuntu并一键制作启动盘 2.1概述 2.2搭建硬件系统 本章硬件工程还是使用<S04_CH01_搭建工程移植LINUX/测试EMMC/VGA>所搭建的VIV ...

  6. Spring Boot配置文件yml讲解--行内对象的配置方式

    yml行内对象的配置方法,一般是采取 上面的缩进方式,我只想配置在一行怎么处?——

  7. 海思HI35xx平台软件开发快速入门之H264解码实例学习

    ref :https://blog.csdn.net/wytzsjzly/article/details/82500277   前言 H264视频编码技术诞生于2003年,至今已有十余载,技术相当成熟 ...

  8. [转]全网最!详!细!tarjan算法讲解

    转发地址:https://blog.csdn.net/qq_34374664/article/details/77488976 原版的地址好像挂了..... 看到别人总结的很好,自己就偷个懒吧..以下 ...

  9. Django-cms show_menu参数解释

    当页面结构设置(/admin/cms/page)如下: - Home (level=0) - About Us (level=1) - About Company Services (level=2) ...

  10. c# dynamic实现动态实体，不用定义实体就能序列化为标准json

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...