flask中使用ajax 处理前端请求 弹框展示
菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了
html:
<html>
<head></head>
<body>
<form class="formXXX1" method="post">
<br class="formXXX2" />
<div class="form-group">
<label for="
telephone14">手机号: <input class="form1" type="iphone" id="a" name="a" maxlength="11" placeholder="请输入11位合法手机号" /> </label>
</div>
<div class="example-box">
<label> 环境:</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-group">
<button class="btn btn-primary" type="button" id="notify">提交</button>
</div>
</form>
</body>
</html>
js:
//路径根据实际路径填写
<script type="text/javascript" src="static/js/jquery.min.js"></script> <script type = "text/javascript" >
$('#notify').on('click',
function() {
//取变量
var b= $("input[name='b']:checked").val(); //单选框取值
var a= $('#a').val();
var data = {
data: JSON.stringify({
'a': a,
'b': b
}),
} //小于11位提示
if (a.length != 11) {
alert('手机号小于11位,请重新输入');
return;
} //ajax 提交数据 $.ajax({
type: "POST",
dataType: "json",
url: "/aaa",//后端请求
data: data,
success: function(result) {
console.log(result);
{
alert('3333' + result);
}
},
error: function (result) {
console.log(result);
{
alert(result);
}
}
}); }) </script>
flask:
@app.route('/aaa',methods=['POST'])
def aaa():
data = json.loads(request.form.get('data'))
a= data['a']
b= data['b']
print (a,b)
# msg = bbb(a, b)#调用 bbb方法拿返回值
msg =a,b
return jsonify(msg)
图例:

参考:博文https://www.cnblogs.com/wanghaonull/p/6340491.html
flask中使用ajax 处理前端请求 弹框展示的更多相关文章
- flask中使用ajax 处理前端请求,结果展示在同一页面,不点击页面不展示
在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果:与上一篇大同小异,需要在 html.flask.js微调 效果展示: (未点击查询) (点击查询) html: <html> ...
- flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面
需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...
- flask中使用ajax 处理前端请求,每隔一段时间请求一次
需求: flask中使用ajax 处理前端请求,每隔一段时间请求一次,并展示在页面 使用 setInterval(function(){},1000)方法 结果展示: html:(test.html) ...
- Android填坑系列:在小米系列等机型上放开定位权限后的定位请求弹框
背景: 近期因实际项目需要,在特定操作下触发定位请求,取到用户位置及附近位置. 问题: 经初步选型,最终决定接入百度定位,按照百度定位SDK Android文档,接入过程相对顺利.但随后发现,在小米系 ...
- Three.js中的div标签跟随(模型弹框)
目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...
- 3.0+百度地图在地图初始化的时候就弹框展示一个信息框,而不是用户点击poi时才弹出
有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Asp.Net Mvc4 Ajax提交数据成功弹框后跳转页面
1.cshtml页面代码 @model Model.UserInfo @{ ViewBag.Title = "Edit"; var options = new AjaxOp ...
- django_jquery中使用ajax发送post请求变成get请求
今天在进行js开发的过程中出现了一个奇怪的问题,就是使用ajax向后端发送post请求时,在浏览器network中查看response时,显示400 bad request 并且请求方式变成get,因 ...
随机推荐
- Linux 线程实现机制分析(转载)
自从多线程编程的概念出现在 Linux 中以来,Linux 多线应用的发展总是与两个问题脱不开干系:兼容性.效率.本文从线程模型入手,通过分析目前 Linux 平台上最流行的 LinuxThreads ...
- QT 头文件之间相互包含会报错:类名不存在
"希望是一个美好的东西! 希望, 这能自己给自己,否则只有无尽的痛苦和迷茫!"---Frank 假设你写了两个类A和B,如果在A.h中有 #include<B.h>; ...
- 多生产者多消费者(第一种方式),基于synchronized,wait,notifyAll
生产者消费者模式描述的是协调与协作关系.比如一个人正在准备食物(生产者),而另一个人正在吃(消费者),他们使用一个共用 的桌子用于放置盘子和取走盘子,生产者准备食物,如果桌子上已经满了就等待,消费者( ...
- C之typedef
1.1 typedef 解析: 1.typedef是一个关键字: 2.typedef它的对象必须是一个类型: 3.作用:给类型取一个别名 1.2 typedef 格式 : typedef 类型 ...
- Python24之递归和迭代
一.递归的含义及一些用途 递归就是函数通过return语句实现自己调用自己的过程,基本上所有的程序语言都有递归算法,常有人说(’一般程序员使用迭代,天才程序员使用递归‘),汉诺塔游戏.谢尔宾斯基三角形 ...
- Sublime实现自动排版
sublime功能很强大, 但是使用sublime就可以实现代码自动重新缩进,使代码缩进重排 方法:Ctrl+A选中全部内容,然后在菜单中选择Edit->Line->Reindent
- Django REST framework 基本组件
一.序列化组件 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之类的表示形式的方式.我们可以通过声明与Django forms ...
- Eclipse RCP使用SWT.EMBEDDED方式显示batik的svgCanvas后窗口最大化变白问题
// 设置svg组件一直动态(这一行代码导致了最大化变白的问题)svgCanvas.setDocumentState(JSVGCanvas.ALWAYS_DYNAMIC);// 以下两行解决最大化变白 ...
- SQL Server存储过程中字符串前加N的含义
使用方法: N'字符串' 解释: 意思为后面的数据类型为NChar或者NVarchar 使用N前缀 在服务器上执行的代码中(例如在存储过程和触发器中)显示的Unicode字符串常量必须以大写字母N为前 ...
- NRF52832 Mesh SDK 调试记录
1.Mesh SDK模型,Node节点在重启之后,心跳不能正常保持,即无法在次启动心跳的解决办法: 原因:主要是因为相关模型没有从Flash里面读取所致,因此只需要回复保存配置即可. 关键代码如下: ...