Flask web开发处理Ajax请求

程序员春雷技术 2022年11月19日

0 收藏 864 点赞 5,094 浏览 1286 个字

本文介绍如何处理ajax请求，

一、处理ajax的post请求

举例一：

js代码举例如下:

    var id = obj.parentNode.parentNode.id;
    $.post("/delitem/"+id, {}, function(data){
        showData(data);
    },"json");

对应的flask代码举例如下：

@app.route('/delitem/<id>', methods=['POST'])
def delitem(id):
    db.delItem(id) #业务代码
    #db.data是python列表对象（元素是字典），返回到浏览器后就是js数组（元素是Josn对象
    return jsonify({"result":db.data})

注意，处理函数可以return两种格式的数据。一是合法的json格式的字符串。

二是通过jsonify 方法将其参数转为一个合法的’Response’对象，jsonify方法的参数有如下几种形式：

1）是个字典对象。到了浏览器，js获取到的就是一个js对象。

2）如 1个或多个参数名= python对象的格式，到了浏览器，js获取到的就是一个js对象，该js对象有一个属性名叫result。如

jsonify(a=1,result=[1,2,3],c=”hello”)

这时到了浏览器，js获取到的就是一个js对象，该js对象就有三个属性，分别是 a, result, c 。其中result属性的值是个数组。

举例2：

js代码如下

    var id = $("#recordid").val();
    var name = $("#recordname").val();
    var msg = $("#recordinfo").val();
    $.post("/additem", {"id":id,"name":name,"msg":msg}, function(data){
        showData(data);
    },"json");

对应的flask代码如下：

@app.route('/additem', methods=['POST'])
def additem():
    db.addItem(request.form.get('id'),request.form.get('name'),request.form.get('msg'))
    return jsonify({"result":db.data})

注意，@app.route 方法中需要指定methods参数为POST

可以看出，在flask中，通过request.form.get 来获取ajax发出的请求。 get方法还可以带第2个参数缺省值，如果指定的参数名不存在，有缺省值的则返回缺省值，没有的话返回None。注意，如果浏览器不是通过ajax发来的post请求，而是通过form提交的，则用request.form[表单元素名]来获取表单元素中的值。

二、处理ajax的get请求

与post请求类似，区别是：

1）@app.route 方法中不需要指定methods参数，因为缺省就是响应get请求

2）获取js发来的参数是用 request.args.get方法