需求：

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. docker 搭建私有 docker hub

    查找registry 镜像 meiya@meiya:/etc/docker$ clear meiya@meiya:/etc/docker$ docker search registry NAME DE ...

  2. Appium移动自动化测试-----（十三）appium API 之其他操作

    其它操作针对移动设备上特有的一些操作. 1.熄屏 方法: * lockDevice() 点击电源键熄灭屏幕. 在iOS设备可以设置熄屏一段时间.Android上面不带参数,所以熄屏之后就不会再点亮屏幕 ...

  3. LeetCode 581. 最短无序连续子数组(Shortest Unsorted Continuous Subarray)

    581. 最短无序连续子数组 581. Shortest Unsorted Continuous Subarray 题目描述 给定一个整型数组,你需要寻找一个连续的子数组,如果对这个子数组进行升序排序 ...

  4. 有助提升编程的几个Python 技巧

    一行代码定义List 定义某种列表时,写For 循环过于麻烦,幸运的是,Python有一种内置的方法可以在一行代码中解决这个问题. 下面是使用For循环创建列表和用一行代码创建列表的对比. x = [ ...

  5. Mysql的多机配置（主从、主主等）

    前言: 最近这几天给弄了2台机器,部署centlos7.5,除了公司的一些模块外,给2台机器做了下主主备份. 其实网上资料一大堆,但是感觉按照别人的思路不如自己的舒服,虽然这玩意思路差不多,但是还是在 ...

  6. 机器学习-EM算法-GMM模型笔记

    GMM即高斯混合模型,下面根据EM模型从理论公式推导GMM: 随机变量X是有K个高斯分布混合而成,取各个高斯分布的概率为φ1,φ2,... ,φK,第i个高斯分布的均值为μi,方差为Σi.若观测到随机 ...

  7. adb连接安卓设备的2种方式

    一.usb连接 安卓设备打开开发者模式,启用usb调试 CMD窗口输入adb devices,此时可以看到自己的设备 PS:无法看到自己设备时,查看手机USB调试是否打开:PC端是否安装手机驱动. 二 ...

  8. java 任务定时调度（定时器）

    任务定时调度 通过Timer和Timetask,我们可以实现定时启动某个线程. java.util.Timer 在这种实现方式中,Timer类作用是类似闹钟的功能,也就是定时或者每隔一定时间触发一次线 ...

  9. 每周分享五个 PyCharm 使用技巧（三）

    文章首发于 微信公众号:Python编程时光 PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌 ...

  10. extjs layout 最灵活的页面布局样式

    当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody( ...