Flask web開發 處理Ajax請求

本文介紹如何處理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方法