Flask Web开发入门（九）之表单处理

灰太狼 2022-06-02 10:27 227阅读 0赞

本章我们介绍Flask Web开发中的表单处理

### **application/json**类型请求 ###

*  前台请求代码：

$.ajax({
                    url: '/add'
                    , type: 'POST'
                    , data: JSON.stringify(data.field)
                    , contentType: 'application/json'
                    , success: function (response) { 
                        console.log(response);
                        if (response.code == 0) {
                            layer.msg('新增成功！');
                        } else {
                            layer.alert('新增失败！')
                        }
                    }
                })

*  后台捕获请求，**request.data**存储了我们的请求数据  
    ![这里写图片描述][SouthEast]
 *  后台出处理代码，其中参数d为**dict**类型数据**request.data**

def add_monitor(d):
        logger.debug('add monitor is %s' % d)
        d = json.loads(d)
        conn = monitor_db.get_connection_with_url(url)    
        # Content-Type: application/json
        conn.execute(T_Monitor.insert(), [{
            'credit_type': d['credit_type']
            , 'query_type': d['query_type']
            , 'credit_status': d['credit_status']
            , 'elapsed_time': int(random.random() * 100)
        }])

### **application/x-www-form-urlencoded**类型请求 ###

*  我们稍微修改下前台发送代码，不指定**contentType**参数：即指定请求内容格式。注意：虽然我们的请求数据是JSON字串，但Ajax中没有指定**contentType**参数，那么数据请求格式仍旧为**application/x-www-form-urlencoded**

$.ajax({
                    url: '/add'
                    , type: 'POST'
                    , data: JSON.stringify(data.field)
                    , success: function (response) { 
                        console.log(response);
                        if (response.code == 0) {
                            layer.msg('新增成功！');
                        } else {
                            layer.alert('新增失败！')
                        }
                    }
                })

![这里写图片描述][SouthEast 1]

通过后台代码调式，我们可以看到**request.form**存储了前台的请求数据如下：  
![这里写图片描述][SouthEast 2]

注意上图红框部分：

*  **request.form**是一个ImmutableMultiDict类型的对象
 *  **request.form**的键值**key**存储了请求数据的**JSON**字串
 *  **request.form**的长度为1

因此，通过上面的代码分析，我们定义Flask表单处理后台代码实现如下，其中参数d是一个ImmutableMultiDict类型对象：

# add monitor
    def add_monitor(d):
        logger.debug('add monitor is %s' % d)
        conn = monitor_db.get_connection_with_url(url)
    
        for key in d.keys():
            logger.debug("form data is %s" % json.loads(key))
            d_dict = json.loads(key)
            conn.execute(T_Monitor.insert(), [{
                'credit_type': d_dict['credit_type']
                , 'query_type': d_dict['query_type']
                , 'credit_status': d_dict['credit_status']
                , 'elapsed_time': int(random.random() * 100)
            }])

### **实现效果** ###

![这里写图片描述][SouthEast 3]

**源码参考**：[https://github.com/ypmc/flask-sqlalchemy-web][https_github.com_ypmc_flask-sqlalchemy-web]

[SouthEast]: /images/20220602/6cd4da3fd80b4a50b438fcdb2e87111c.png
[SouthEast 1]: /images/20220602/6bb18846a7aa47d6a18c1bbddc333d92.png
[SouthEast 2]: /images/20220602/7770931c0d084fd3a35093d5f9f82aed.png
[SouthEast 3]: /images/20220602/126663ec3458489fa2c8c8844968bf01.png
[https_github.com_ypmc_flask-sqlalchemy-web]: https://github.com/ypmc/flask-sqlalchemy-web