我正在从我的Angular 2应用程序向我的Django REST Framework API发出POST请求。它似乎工作正常，但是当我查看我的应用程序中返回的数据时，它包含如下意外的html（如用于显示数据的警报中所示转储）：
{"_body":"\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n \n\n \n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n <meta name=\"robots\" content=\"NONE,NOARCHIVE\" />\n \n\n <title>Item List – Django REST framework</title>\n\n \n \n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap.min.css\"/>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap-tweaks.css\"/>\n \n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/prettify.css\"/>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/default.css\"/>\n \n\n \n</head>\n\n\n<body class=\"\">\n\n <div class=\"wrapper\">\n \n <div class=\"navbar navbar-static-top navbar-inverse\">\n <div class=\"container\">\n <span>\n \n <a class='navbar-brand' rel=\"nofollow\" href='http://www.django-rest-framework.org'>\n Django REST framework\n </a>\n \n </span>\n <ul class=\"nav navbar-nav pull-right\">\n \n \n \n \n \n </ul>\n </div>\n </div>\n \n\n <div class=\"container\">\n \n <ul class=\"breadcrumb\">\n \n \n <li><a href=\"/api/\">Api Root</a></li>\n \n \n \n <li class=\"active\"><a href=\"/api/items/\">Item List</a></li>\n \n \n </ul>\n \n\n <!-- Content -->\n <div id=\"content\">\n\n \n <form id=\"get-form\" class=\"pull-right\">\n <fieldset>\n \n <div class=\"btn-group format-selection\">\n <a class=\"btn btn-primary js-tooltip\" href=\"/api/items/\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource\">GET</a>\n\n <button class=\"btn btn-primary dropdown-toggle js-tooltip\" data-toggle=\"dropdown\" title=\"Specify a format for the GET request\">\n <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n \n <li>\n <a class=\"js-tooltip format-option\" href=\"/api/items/?format=json\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `json`\">json</a>\n </li>\n \n <li>\n <a class=\"js-tooltip format-option\" href=\"/api/items/?format=api\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `api`\">api</a>\n </li>\n \n </ul>\n </div>\n \n </fieldset>\n </form>\n \n\n \n <form class=\"button-form\" action=\"/api/items/\" data-method=\"OPTIONS\">\n <button class=\"btn btn-primary js-tooltip\" title=\"Make an OPTIONS request on the Item List resource\">OPTIONS</button>\n </form>\n \n\n \n\n \n\n <div class=\"content-main\">\n <div class=\"page-header\">\n <h1>Item List</h1>\n </div>\n <div style=\"float:left\">\n \n \n \n </div>\n\n \n\n <div class=\"request-info\" style=\"clear: both\" >\n <pre class=\"prettyprint\"><b>POST</b> /api/items/</pre>\n </div>\n\n <div class=\"response-info\">\n <pre class=\"prettyprint\"><span class=\"meta nocode\"><b>HTTP 201 Created</b>\n<b>Allow:</b> <span class=\"lit\">GET, POST, HEAD, OPTIONS</span>\n<b>Content-Type:</b> <span class=\"lit\">application/json</span>\n<b>Location:</b> <span class=\"lit\">fred</span>\n<b>Vary:</b> <span class=\"lit\">Accept</span>\n\n</span>{\n "url": "fred",\n "item_type": "P",\n "title": "",\n "credits_applied": 10,\n "credits_left": 10,\n "credits_gifted": 0,\n "username": "admin",\n "liked": 0,\n "disliked": 0\n}</pre>\n </div>\n </div>\n\n \n\n \n <div class=\"tabbable\">\n \n <ul class=\"nav nav-tabs form-switcher\">\n <li>\n <a name='html-tab' href=\"#post-object-form\" data-toggle=\"tab\">HTML form</a>\n </li>\n <li>\n <a name='raw-tab' href=\"#post-generic-content-form\" data-toggle=\"tab\">Raw data</a>\n </li>\n </ul>\n \n\n <div class=\"well tab-content\">\n \n <div class=\"tab-pane\" id=\"post-object-form\">\n \n <form action=\"/api/items/\" method=\"POST\" enctype=\"multipart/form-data\" class=\"form-horizontal\" novalidate>\n <fieldset>\n <input type='hidden' name='csrfmiddlewaretoken' value='Z42Ygso019oegnf1NPdnCeq6ZoqlyWQN' />\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Url\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"url\" class=\"form-control\" type=\"text\" value=\"fred\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group\">\n \n <label class=\"col-sm-2 control-label \">\n Item type\n </label>\n \n\n <div class=\"col-sm-10\">\n <select class=\"form-control\" name=\"item_type\">\n \n \n \n <option value=\"V\" >Vine</option>\n \n \n \n <option value=\"Y\" >YouTube</option>\n \n \n \n <option value=\"P\" selected >Photo</option>\n \n \n \n <option value=\"F\" >Flickr</option>\n \n \n \n <option value=\"I\" >Instagram</option>\n \n \n \n <option value=\"D\" >DeviantArt</option>\n \n \n \n <option value=\"5\" >500px</option>\n \n \n </select>\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Title\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"title\" class=\"form-control\" type=\"text\" >\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits applied\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_applied\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n <span class=\"help-block\">Total number of credits applied to this item including any given by VeeU admin</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits left\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_left\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n <span class=\"help-block\">The number of credits still remaining to show the item</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits gifted\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_gifted\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n <span class=\"help-block\">The number of credits this item has been gifted by other users</span>\n \n </div>\n</div>\n\n \n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Liked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"liked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Disliked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"disliked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n\n <div class=\"form-actions\">\n <button class=\"btn btn-primary\" title=\"Make a POST request on the Item List resource\">POST</button>\n </div>\n </fieldset>\n </form>\n \n </div>\n \n\n <div class=\"tab-pane\" id=\"post-generic-content-form\">\n \n <form action=\"/api/items/\" method=\"POST\" class=\"form-horizontal\">\n <fieldset>\n \n\n\n <div class=\"form-group\">\n <label for=\"id__content_type\" class=\"col-sm-2 control-label\">Media type:</label>\n <div class=\"col-sm-10\">\n <select data-override=\"content-type\" id=\"id__content_type\" name=\"_content_type\" class=\"form-control\">\n<option value=\"application/json\" selected=\"selected\">application/json</option>\n<option value=\"application/x-www-form-urlencoded\">application/x-www-form-urlencoded</option>\n<option value=\"multipart/form-data\">multipart/form-data</option>\n</select>\n <span class=\"help-block\"></span>\n </div>\n </div>\n\n <div class=\"form-group\">\n <label for=\"id__content\" class=\"col-sm-2 control-label\">Content:</label>
显然我的视图和序列化程序出错了，但看不清楚。
观点是：
class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all().order_by('-date_added')
serializer_class = ItemSerializer
def perform_create(self, serializer):
creator = User.objects.get(pk=self.request.data['owner_id'])
serializer.save(owner=creator)
def get_queryset(self):
this_user = self.request.query_params.get('user', None)
restrict_to_items_from_user_id = self.request.query_params.get('from', None)
quantity = self.request.query_params.get('num', 20)
if restrict_to_items_from_user_id is not None:
queryset = Item.objects.filter(owner=restrict_to_items_from_user_id, active=True).order_by('-date_added')[0:int(quantity)]
elif this_user is not None:
queryset = Item.objects.filter(active=True, credits_left__gt=0).exclude(pk__in=Seen.objects.filter(user_id=this_user).values_list('item_id', flat=True))[0:int(quantity)]
else:
queryset = Item.objects.filter(active=True, credits_left__gt=0)[0:int(quantity)]
return queryset
序列化器是：
class ItemSerializer(serializers.HyperlinkedModelSerializer):
username = serializers.SerializerMethodField()
def get_username(self, obj):
"""
Note that query params can be accessed here as follows:
request = self.context['request']
print request.query_params.get['fields']
"""
value = str(obj.owner)
return value
def get_keywords(self, obj):
value = str(obj.keywords)
return value
class Meta:
model = Item
fields = ('url', 'item_type', 'title', 'credits_applied', 'credits_left', 'credits_gifted', 'username', 'liked', 'disliked')
从我的应用程序发出GET时，API代码实现了我的期望，但我不明白为什么POST会返回一大堆意想不到的HTML。
换句话说，如何确定POST后视图/序列化程序返回的内容。例如，我可能希望添加一些关于错误参数的数据等。
修改 这是POST
的Angular 2代码
let body = JSON.stringify({ url: 'fred', item_type: 'P', owner_id: 2, owner: "admin" });
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post('http://127.0.0.1:8000/api/items/',
body, {
headers: headers
})
.subscribe(
data => {
alert('DATA RETURNED: '+JSON.stringify(data));
},
err => alert('POST ERROR: '+err.json().message),
() => alert('POST Complete')
);
答案 0 :(得分：0)
问题是由于测试应用程序在与Django代码相同的服务器上运行导致Django认为需要Web API！