在同一页面点击按钮，后端处理后展示在同一页面，不点击隐藏该结果；与上一篇大同小异，需要在 html、flask、js微调

效果展示：

（未点击查询）

（点击查询）

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>

 </body>

 </html>

js:

 <script type="text/javascript" src="static/js/main.min.js"></script> //--static/ 这个目录自己定义

 <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: "/test111",//调用后台test111方法

             data: data,

             success: function (result) {

                 console.log(result);

                 {

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

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

                 }

             },

             error: function (result) {

                 console.log(result);//

                 {

                                     alert(result);

                 }

             }

         });

     })

 </script>

flask：
 @app.route('/test111',methods=['GET','POST'])

 def test111():

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

     # print('data:',data)

     b = data['b']

     a = data['a']

     print (b)

     print (a)

     msg111 = aaa(a, b)#调用aaa方法

     # print(msg111)

     return jsonify(msg111)

 # aaa方法

 def aaa(a,b):

     s = '<div class="grid"><div class="c">{a}{b}&nbsp;</div></div>'.format(a=a,b=b)  //返回html格式

     return s

flask中使用ajax 处理前端请求，结果展示在同一页面，不点击页面不展示的更多相关文章

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

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...

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

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

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

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

  4. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  5. django_jquery中使用ajax发送post请求变成get请求

    今天在进行js开发的过程中出现了一个奇怪的问题,就是使用ajax向后端发送post请求时,在浏览器network中查看response时,显示400 bad request 并且请求方式变成get,因 ...

  6. jQuery中的Ajax几种请求方法

    在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...

  7. jQuery中的Ajax几种请求方式

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

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

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

  9. Python直接改变实例化对象的列表属性的值 导致在flask中接口多次请求报错

    错误原理实例如下: class One(): list = [1, 2, 3] @classmethod def get_copy_list(cls): # copy一份list,这样对list的改变 ...

随机推荐

  1. python字符串/列表/元组/字典之间的相互转换（5）

    一.字符串str与列表list 1.字符串转列表 字符串转为列表list,可以使用str.split()方法,split方法是在字符串中对指定字符进行切片,并返回一个列表,示例代码如下: # !usr ...

  2. 在linux上cuda9.0 cudnn7.* 安装python3.6 tensorflow 1.5.1

    链接:https://www.jianshu.com/p/bcf37d0e4e9b 为了入门机器学习的小伙伴能安装好工具,特制作此教程 按照 Anaconda 下载网站上的说明下载并安装 Anacon ...

  3. 【转帖】如果进入CPU的世界，时间会是怎样的？

    如果进入CPU的世界,时间会是怎样的? 2018-02-26 20:52:46 world6 阅读数 1295更多 分类专栏: 网络 缓存服务 架构   版权声明:本文为博主原创文章,遵循CC 4.0 ...

  4. [PDF] - 获取 RadioButtonList 控件值的方法

    背景 目标是通过 iTextSharp 读取 PDF 模板,填充内容后以生成新 PDF 文件.利用 福昕PDF编辑器个人版 可以获取到 RadioButtonList 的组名,但是获取不到每一个 Ra ...

  5. Git操作入门

    生成ssh key: ​ ssh-keygen -t rsa -C "lkt@temp.com" ​ 按三次回车,最后在.ssh文件夹下得到id_rsa和id_rsa.pub两个文 ...

  6. Zuul【入门】

    1.创建eureka-server注册中心工程,配置跟之前讲eureka文章中一样,这里不再赘述 1.1.端口8888 2.创建一个demo-client工程 2.1.demo-client启动类跟之 ...

  7. 从零开始学Flask框架-002

    Jinja2模板 默认情况下,Flask 在程序文件夹中的templates 子文件夹中寻找模板. Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/b ...

  8. 第二章 Python基础语法

    2.1 环境的安装 解释器:py2 / py3 (环境变量) 开发工具:pycharm 2.2 编码 编码基础 ascii ,英文.符号,8位为一个东西,2**8 unicode ,万国码,可以表示所 ...

  9. mysql创建唯一索引UNIQUE INDEX，以及报错“#失败原因: [Execute: Duplicate entry '733186700' for key 'uniq_video_id_index']”

    要给t_video_prods表的video_id字段创建唯一所以,可以使用下面这条语句: alter table t_video_prods add UNIQUE INDEX `uniq_video ...

  10. [Luogu5327][ZJOI2019]语言(树上差分+线段树合并)

    首先可以想到对每个点统计出所有经过它的链的并所包含的点数,然后可以直接得到答案.根据实现不同有下面几种方法.三个log:假如对每个点都存下经过它的链并S[x],那么每新加一条路径进来的时候,相当于在路 ...