需求：

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. Head First Design Patterns HeadFirst 设计模式

    OO原则是我们的目标,而设计模式是我们的做法. 策略模式 (Strategy) 在软件开发上,一直不变的真理是"change".不管软件设计的多好,一段时间之后,总是要成长与改变, ...

  2. virtualenv虚拟环境搭建及pipreqs自动生成第三方模块简介

    阅读目录 virtualenv简介 含义: 为何要用虚拟环境: virtualenv安装和使用 pipreqs模块的介绍和使用 回到顶部 virtualenv简介 回到顶部 含义: virtual:虚 ...

  3. context.xml文件配置

    <?xml version='1.0' encoding='utf-8'?> <Context> <WatchedResource>WEB-INF/web.xml& ...

  4. 学习Ajax小结

    Ajax 学习         1.ajax的概念              局部刷新技术,不是一门新技术,是多种技术的组合,是浏览器端技术         2.作用             可以实现 ...

  5. 031 Android 自定义控件

    1.自定义控件的优点 Android自身带的控件不能满足需求, 需要根据自己的需求定义控件. 2.自定义控件的分类: (1)组合已有的控件实现 (2)继承已有的控件实现(扩展已有的功能) (3)完全自 ...

  6. SecureCRT系列：生成公私钥

    SecureCRT下载地址:http://www.portablesoft.org/securecrt-securefx-legacy-versions/1.打开我们的SecureCRT客户端,点击t ...

  7. Python基础系列讲解——try_except异常处理机制

    在Python编程中不可避免的会出现错误,在调试阶段出现语法之类的错误时,Pycharm会在Debug窗口提示错误,但是程序在运行时由于内部隐含的问题而引起错误,会导致程序终止执行.比如以下例程中,使 ...

  8. （一）Shiro，久闻其名，而今初相识

    文章目录 shiro简介 功能介绍 从外部看 Shiro 架构 从内部看 Shiro 架构 多说一句,在学习shiro之前,我觉得应该先用 filter ,自己动手写过粗粒度的权限系统,而不要一上来就 ...

  9. python 之 并发编程（线程Event、协程）

    9.14 线程Event connect线程执行到event.wait()时开始等待,直到check线程执行event.set()后立即继续线程connect from threading impor ...

  10. WUSTOJ 1298: 操作格子（Java）

    题目链接: