前提・実現したいこと
Pythonでdjangorestframeworkを使用してデータベースから読み込んだデータをJSON形式で返す処理を作成しています。
上記のREST APIは実際にWebブラウザ上で指定のアドレスへアクセスすればデータが出力されていることを確認しています。
jQueryを用いて上記のREST APIからJSONデータを受け取ってHTMLページへ埋め込む処理を作りたいです。
Python 3.6
Django 2.0.5
django-cors-headers 2.2.0
django-filter 1.1.0
djangorestframework 3.8.2
発生している問題・エラーメッセージ
実際にjQueryのajaxを使用して取得しようとすると以下のエラーが発生してしまいます。
Error: jQuery1800804225095946975_1526269266370 was not called
at Function.error (eval at <anonymous> (jquery-1.8.0.min.js:2), <anonymous>:2:13145)
at c.converters.script json (eval at <anonymous> (jquery-1.8.0.min.js:2), <anonymous>:2:83347)
at cC (eval at <anonymous> (jquery-1.8.0.min.js:2), <anonymous>:2:5874)
at y (eval at <anonymous> (jquery-1.8.0.min.js:2), <anonymous>:2:79888)
at HTMLScriptElement.c.onload.c.onreadystatechange (eval at <anonymous> (jquery-1.8.0.min.js:2), <anonymous>:2:84323)
ただ、Google ChromeのDevTools上でヘッダは200 OKが出ていて、ResponseでもJSONのデータが受け取ることが出来ていますが、ajaxはエラーになってしまいます。
該当のソースコード
・Settings.py
Python
1INSTALLED_APPS = [ 2 'django.contrib.admin', 3 'django.contrib.auth', 4 'django.contrib.contenttypes', 5 'django.contrib.sessions', 6 'django.contrib.messages', 7 'django.contrib.staticfiles', 8 'rest_framework', 9 'corsheaders', 10] 11 12MIDDLEWARE = [ 13 'django.middleware.security.SecurityMiddleware', 14 'django.contrib.sessions.middleware.SessionMiddleware', 15 'django.middleware.common.CommonMiddleware', 16 'django.middleware.csrf.CsrfViewMiddleware', 17 'django.contrib.auth.middleware.AuthenticationMiddleware', 18 'django.contrib.messages.middleware.MessageMiddleware', 19 'django.middleware.clickjacking.XFrameOptionsMiddleware', 20 'corsheaders.middleware.CorsMiddleware', 21 'django.middleware.common.CommonMiddleware', 22] 23 24CORS_ORIGIN_WHITELIST = ( 25 'localhost:8000', 26 '127.0.0.1:8000' 27) 28CORS_ORIGIN_REGEX_WHITELIST = ( 29 'localhost:8000', 30 '127.0.0.1:8000' 31) 32CORS_ORIGIN_ALLOW_ALL = True 33 34REST_FRAMEWORK = { 35 'DEFAULT_RENDERER_CLASSES': ( 36 'rest_framework.renderers.JSONRenderer', 37 ), 38 'DEFAULT_PARSER_CLASSES': ( 39 'rest_framework.parsers.JSONParser', 40 ) 41}
・ajax_test/urls.py
Python
1from django.contrib import admin 2from django.urls import path 3from django.conf.urls import url, include 4from test_dir.urls import router as test_router 5 6urlpatterns = [ 7 path('admin/', admin.site.urls), 8 url(r'^api/', include(test_router.urls)), 9] 10
・test_dir/urls.py
Python
1from rest_framework import routers 2from .views import TestAPIViewSet 3 4router = routers.DefaultRouter() 5router.register(r'test', TestAPIViewSet)
・test_dir/model.py
Python
1from django.db import models 2from rest_framework.views import APIView 3from urllib.parse import urlparse 4import mysql.connector 5from rest_framework.response import Response 6 7class TestAPI(models.Model): 8 id = models.IntegerField('id') 9 name = models.CharField('name',max_length=20) 10 value = models.IntegerField('value') 11 class Meta: 12 app_label = "TestAPI" 13 db_table = "test" 14
・test_dir/serializer.py
Python
1from rest_framework import serializers 2from .models import TestAPI 3 4class TestAPISerializer(serializers.ModelSerializer): 5 class Meta: 6 model = TestAPI 7 fields = ('id', 'name', 'value')
・views.py
Python
1import django_filters 2from rest_framework import viewsets, filters 3 4from .models import TestAPI 5from .serializer import TestAPISerializer 6 7from django.http import JsonResponse 8 9class TestAPIViewSet(viewsets.ModelViewSet): 10 queryset = TestAPI.objects.all() 11 serializer_class = TestAPISerializer 12 base_url = '/api/test/' 13 14def DBDataRes(request): 15 json_ary = [] 16 c = connections['default'] 17 cursor = c.cursor 18 try: 19 cursor.execute('select id, name, value from test') 20 results = cursor.fetchall() 21 for result in results.order_by('id'): 22 dict = OrderedDict( 23 ('id', result.id), 24 ('name', result.name), 25 ('value', result.value) 26 ) 27 json_ary.append(dict) 28 29 c.commit() 30 return JsonResponse(json_ary) 31 except Exception as err: 32 c.rollback() 33 raise err 34 finally: 35 cursor.close() 36 c.close()
・ajaxtest.js
JavaScript
1var ajax_test = function () { 2 alert('start'); 3 $.ajax({ 4 url: 'http://localhost:8000/api/test', 5 type: 'GET', 6 data: { 7 }, 8 dataType: 'jsonp', 9 }) 10 .done(function(data){ 11 data.foreach(function (datum) { 12 $('#ajax_result').append('<div><div><div>id</div><div>' + datum.id + '</div></div><div><div>name</div><div>' + datum.name + '</div></div><div><div>value</div><div>' + datum.value + '</div></div></div>'); 13 }) 14 }) 15 .fail(function(xhr, textStatus, errorThrown){ 16 alert('fail'); 17 }) 18}; 19 20 21//初期処理 22$(function () { 23 document.getElementById('btn_test').addEventListener('click', function () { 24 ajax_test(); 25 }, false); 26});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。