需求：

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. 【坑】SpringMvc 处理JSON 乱码

    文章目录 前言 方法 前言 在使用 springMvc 的时候,如果向前台返回 JSON 数据,JSON 中的中文会乱码: 即使你在配置了全局的信息编码拦截器,也无济于事: 原因大抵是,JSON 的内 ...

  2. Ubuntu的apt命令详解()deepin linux是在Ubuntu基础上开发的

    apt-cache和apt-get是apt包的管理工具,他们根据/etc/apt/sources.list里的软件源地址列表搜索目标软件.并通过维护本地软件包列表来安装和卸载软件. 查看本机是否安装软 ...

  3. Python爬虫刷回复

    最近闲的无聊,就想着去看看爬虫,顺着爬虫顺利的做到了模拟登录.刷帖子等等,这里简要说一下. 使用Python2.7写的爬虫,对某论坛做模拟登陆和刷帖子.回复等等,由于之前是没有接触过爬虫,这次之后感觉 ...

  4. PAT甲级题分类汇编——计算

    本文为PAT甲级分类汇编系列文章. 计算类,指以数学运算为主或为背景的题. 题号 标题 分数 大意 1058 A+B in Hogwarts 20 特殊进制加法 1059 Prime Factors ...

  5. go String接口方法

    该接口经常用于输出 struct 的值 或者记录struct数据日志 一个普遍存在的接口是 fmt 包中定义的 Stringer接口 发现 http://tour.studygolang.com/me ...

  6. SAS学习笔记47 Macro Quoting

    简单来说:Macro Quoting就是将具有特殊功能字符及字母组合的特殊功能隐藏掉.例如:让分号(;)不再表示一个语句的结束,而就是一个普普通通的字符:让GE不再表示大于等于的比较符,而就是两个普普 ...

  7. idea的项目结构

    idea项目结构: 一般是创建一个empty project,然后再创建一个个的Module.

  8. spring源码学习（一）--AOP初探

    LZ以前一直觉得,学习spring源码,起码要把人家的代码整体上通读一遍,现在想想这是很愚蠢的,spring作为一个应用平台,不是那么好研究透彻的,而且也不太可能有人把spring的源码全部清楚的过上 ...

  9. Linux上安装pstree命令（-bash: pstree: command not found）

    一.pstree命令的安装 1.在 Mac OS上 brew install pstree 2.在 Fedora/Red Hat/CentOS yum -y install psmisc 3.在 Ub ...

  10. hdu 6661 Acesrc and String Theory (后缀数组)

    大意: 求重复$k$次的子串个数 枚举重复长度$i$, 把整个串分为$n/i$块, 如果每块可以$O(1)$计算, 那么最终复杂度就为$O(nlogn)$ 有个结论是: 以$j$开头的子串重复次数最大 ...