在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果;与上一篇大同小异,需要在 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. git和GitHub初级

    使用方式: 一种是本地创建一个文档, 然后在github上创建一个仓库, 在上传上去 一种是从仓库下载代码, 然后在本地编辑, 然后在上传上去 第一种: 首先在linux上创建一个文档, mkdir ...

  2. [DFS]排队(间隔排列)-C++

    Description 小Q是班长.在校运动会上,小Q班要进行队列表演.小Q要选出2*N名同学编队,每人都被编上一个号,每一个从1到N的自然数都被某2名同学佩戴,现在要求将他们排成一列,使两个编号为1 ...

  3. TCP/IP学习笔记10--以太网之基本概念2: 以太网帧格式

    "如果错过太阳时你流了泪,那么你也要错过群星了."--- 泰戈尔 前导码(Preamble): 最前面时8个字节的前导码,表示一个以太网帧的开始. 另外,前导码的最后两个比特是&q ...

  4. Java基础笔试练习(一)

    1. 若在某一个类定义中定义有如下的方法: abstract void performDial( ); 该方法属于() ? A.本地方法 B.最终方法 C.静态方法 D.抽象方法 答案: D 解析: ...

  5. WUSTOJ 1323: Repeat Number(Java)规律统计

    题目链接:1323: Repeat Number Description Definition: a+b = c, if all the digits of c are same ( c is mor ...

  6. Kafka 的这些原理你知道吗

    如果只是为了开发 Kafka 应用程序,或者只是在生产环境使用 Kafka,那么了解 Kafka 的内部工作原理不是必须的.不过,了解 Kafka 的内部工作原理有助于理解 Kafka 的行为,也利用 ...

  7. C# mailKit 发邮件 简单代码

    public static async Task<bool> SendMailAsync22(string Name, string receive, string sender, str ...

  8. wampserver的使用配置

    1.正常安装就不说了,只需要把安装位置改成需要的位置就可以了.其它的默认就可以了. 2.安装完成之后打开wampserver. 3.现在该修改密码了: (1)点击进入mysql控制台. (2)Wamp ...

  9. iOS开发 CGAffineTransform 让图片旋转, 旋转后获得图片旋转的角度

    1.让图片旋转 UIImageView *imageView = [[UIImageView alloc]init]; imageView.frame = CGRectMake(50, 50, 200 ...

  10. Linux命令——set 和 unset

    参考:Linux set and unset http://www.runoob.com/linux/linux-comm-set.html https://blog.csdn.net/u010003 ...