flask中使用ajax 处理前端请求的数据

Posted whycai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="telephone14" name="telephone14" maxlength="11" placeholder="请输入11位合法手机号" /> </label>
</div>
<div class="example-box">
<label>&nbsp;环境:</label>
<label class="lyear-radio radio-inline radio-primary"> <input type="radio" id="env14" name="env14" value="0" checked="" /><span>dev</span> </label>
<label class="lyear-radio radio-inline radio-primary"> <input type="radio" id="env14" name="env14" value="1" /><span>qa</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" >
$(‘#notify‘).on(‘click‘,
function() {
//取变量
var envId = $(‘#env14‘).val();
var telephone = $(‘#telephone14‘).val();
var data = {
data: JSON.stringify({
‘env‘: env,
‘telephone‘: telephone
}),
} {
}

//小于11位提示
if (telephone.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‘))
env = data[‘env‘]
telephone = data[‘telephone‘]
print (env,telephone)
    msg14 = bbb(env, telephone)#调用 bbb方法拿返回值
return jsonify(msg14)

 

图例:

技术图片

 

 

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

 

以上是关于flask中使用ajax 处理前端请求的数据的主要内容,如果未能解决你的问题,请参考以下文章

Flask 异步化

Flask web开发 处理Ajax请求

Flask与axios 前后端交互

Flask处理前端POST过来的JSON

前端ajax如何接受后台的model

类Flask实现前后端交互之代码聊天室