flask与ajax交互

鉴于网上大部分是post请求的文章，本文提供get和post请求的参考

一、flask与ajax的get请求的交互

二、flask与ajax的post请求的交互

参考：https://blog.csdn/kikaylee/article/details/54885250

一、flask与ajax的get请求的交互

前端（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>index</title>
</head>
<body>
	<button onclick="getTest()">点击响应ajax中get请求</button>
</body>
<!-- js部分 -->
<!-- 引入jquery -->
<script src="https://cdn.staticfile/jquery/1.10.2/jquery.min.js"></script>

<script>
	function getTest(){
		$.ajax({
			type: 'GET',
			url: '/testGet',
			dataType: 'json',
			data: {'name':'get'},
			success: function(res){
				console.log(res)
			},
			error: function(){
				consle.log('error')
			}
		})	
	}
</script>

<!-- /js部分 -->
</html>

后端（routes.py）

# 一个简单的flask脚本,参照一个最小的应用

from flask import Flask,render_template,request,jsonify

app = Flask(__name__)

# 路由

@app.route('/')
def index():
    return render_template('index.html')

#处理ajax中get请求
@app.route('/testGet',methods=['GET'])
def testGet():
    data = request.args.get('name')
    print(data)
    return jsonify({'status':True})

if __name__ == '__main__':
    app.run()

二、flask与ajax的post请求的交互

前端（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>

//路径根据实际路径填写
<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)
             },
            error: function (result) {
                console.log(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交互