黄兵的个人博客

Flask 测试提交 json 数据，javascript 提交 json 数据

最近使用 Flask 框架做测试，需要测试代码，具体代码如下：

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

import unittest
import json

from app import create_app, db


class APITestCase(unittest.TestCase):
    def setUp(self):
        self.app = create_app('testing')
        self.app_context = self.app.app_context()
        self.app_context.push()
        db.create_all()
        self.client = self.app.test_client()

    def tearDown(self):
        db.session.remove()
        db.drop_all()
        self.app_context.pop()

    @staticmethod
    def get_api_headers():
        return {'Accept': 'application/json', 'Content-Type': 'application/json'}

    def test_cidr(self):
        response = self.client.post('/api/v1/tools/cidr-to-ip-range', headers=self.get_api_headers(),
                                    data=json.dumps({"cidr": "192.0.2.0/29"}))
        self.assertEqual(response.status_code, 200)
        response = self.client.post('/api/v1/tools/cidr-to-ip-range', headers=self.get_api_headers(),
                                    data=json.dumps({'cidr': '192.0.2.0/35 '}))
        self.assertEqual(response.status_code, 400)
        response = self.client.post('/api/v1/tools/cidr-to-ip-range', headers=self.get_api_headers(),
                                    data=json.dumps({'cidr': '::ffff:0:0/96'}))
        self.assertEqual(response.status_code, 200)

这里最主要的看 get_api_headers ，此处设置了 http 的 header，提交的是 json 数据。

同时需要将提交的数据序列化成 json 数据，这里使用了 json.dumps()

之后看看端点，具体代码片段如下：

if request.method == 'POST':
    # 获取cidr,例如：192.168.50.0/32
    get_cidr = request.json['cidr'].strip()

这里使用 request.json[] 获取数据。

但是这里设置好了，测试没问题，前端使用 javascript 提交数据，具体示例代码片段如下：

$.ajax({
    type: "POST",
    url: "/api/v1/tools/cidr-to-ip-range",
    contentType: 'application/json',
    data: JSON.stringify({"cidr": cidr_selected}),
    beforeSend: function (xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrfToken)
        }
    },
    success: function (data) {

以上代码不完整，这里首先也是设置提交的内容类型是： application/json，之后将提交的内容序列化成 json，与测试代码如出一辙。

好了关键代码已经展示了，这里最主要的有以下两点：

1、设置提交数据的类型： application/json；

2、将提交的数据序列化成 json。

这样就可以不用修改代码，前端后后端都测试没问题。

参考资料：

1、MDN Web Doc - JSON.stringify()

2、Sending a JSON to server and retrieving a JSON in return, without JQuery

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Flask 测试提交 json 数据，javascript 提交 json 数据