Django解析Angular的POST数据

在使用Django和Angular的过程中，遇到过一个Angular向Django POST数据的问题。

// Angular
$http({
    url: "myviews",
    method: "POST",
    data: {'text': 'hello world', 'date': '2017-01-04'}
})

# Django
def myviews(request):
    print request.POST
    print request.body

以上将会打印出

<QueryDict: {}>
u"{'text': 'hello world', 'date': '2017-01-04'}"

而我们期望是这样的结果

<QueryDict: {u'text': u'hello world', u'date': u'2017-01-04'}>
u"{'text': 'hello world', 'date': '2017-01-04'}"

出现这种问题是因为Angular默认发送的数据格式是JSON而不是urlencode，而Django的request.POST无法解析JSON，所以才会出现上面的结果。

解决的办法有很多，最简单粗暴的办法就是在每个视图函数里面都将request.body进行解析

def myviews(request):
    data = urlencode(json.loads(request.body))
    q_data = QueryDict(data)

我们可以把这类操作提取出来，写成Middlerware，在request请求到达视图函数之前就给统一处理好

class JSONMiddleware(object):
    """
    Process application/json requests data from GET and POST requests.
    """
    def process_request(self, request):
        if 'application/json' in request.META['CONTENT_TYPE']:
            data = json.loads(request.body)
            q_data = QueryDict('', mutable=True)

            for key, value in data.iteritems():
                if isinstance(value, list):
                    for x in value:
                        q_data.update({key: x})
                else:
                    q_data.update({key: value})

            if request.method == 'GET':
                request.GET = q_data

            if request.method == 'POST':
                request.POST = q_data
        return None

因为有的request请求当中没有CONTENT-TYPE这个Header，所以我们需要判断一下，之所以不简单的转化成Dict而是QueryDict是因为遵循一致性的原则，我们想要将结果绑定在request.GET或者request.POST上面，而它们都是QueryDict类型。QueryDict和Dict最大的区别是QueryDict将每个value存在列表当中，并且QueryDict是不可修改类型。所以当value是列表时我们也必须做一下判断，否则整个列表将作为一个元素存入QueryDict的列表当中。

a = {"a": [123, 456, 444], "b": 456}
# 不做判断
data = QueryDict('', mutable=True)
for k, v in a.iteritems():
    data.update({k: v})
print data

# 做判断
data = QueryDict('' mutable=True)
for k, v in a.iteritems():
    if isinstance(v, list):
        for x in value:
            data.update({k: x})
    else:
        data.update({k: v})
print data

<QueryDict: {u'a': [[123, 456, 444]], u'b': [456]}>
<QueryDict: {u'a': [123, 456, 444], u'b': [456]}>