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>&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-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)

图例:

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

参考:博文https://www.cnblogs.com/wanghaonull/p/6340491.html

上一篇:Flask学习之旅--用 Python + Flask 制作一个简单的验证码系统


下一篇:Spring的注解