ajaxを使用すると、Django Restフレームワークの応答からデータを取得できません

Question

jquery ajaxでDjango Rest APIを使用する傾向があります。私は、バックエンドでの成功コード受信

  $('#redirect').click(function(){ 
       var data = {key1: "value1"}; 
       console.log('redirect button clicked'); 
       $.ajax({ 
        type: "POST", 
        url: "http://127.0.0.1:8000/test/", 
        "data": data, 
        dataType: "jsonp", 
        success: function(data){ 
         console.log('success'); 
         console.log(JSON.stringify(data)); 
         }, 
        failure: function(errMsg) { 
         console.log('failure'); 
         console.log(errMsg); 
         } 
        }); 
       }); 

：

[24/Oct/2017 08:44:05] "GET /test/?callback=jQuery21100695833324387296_1508823842460&key1=value1&_=1508823842461 HTTP/1.1" 200 27 
[24/Oct/2017 08:44:06] "GET /test/?callback=jQuery21100695833324387296_1508823842460&key1=value1&_=1508823842462 HTTP/1.1" 200 27 

をとフロントエンドで何も受け取らない：

フロントエンドのコードを消費

@api_view(["GET", "POST"]) 
@permission_classes((AllowAny,)) 
@method_decorator(csrf_exempt, name='dispatch') 
def hello_world(request): 
    if request.method == 'POST': 
     return Response({"message": "Got some data!", "data": request.data}) 
    return Response({"message": "Hello, world!"}) 

そしてsumple：私は単純なビューを作成し

redirect button clicked (08:44:06:227 | null) 
    at public_html/index.html:112 
redirect button clicked (08:44:06:885 | null) 
    at public_html/index.html:112 

私は知っています私は単純なものを失うが、見つけ出すことはできない。私のコードで何が間違っているのかを教えてください。

UPD。フロントエンドコードを変更：

  $('#redirect').click(function(){ 
       var data = {key1: "value1"}; 
       console.log('redirect button clicked'); 
       $.ajax({ 
        method: "POST", 
        url: "http://127.0.0.1:8000/test/", 
        "data": data, 
        dataType: "jsonp", 
        success: function(data){ 
         console.log('success'); 
         console.log(JSON.stringify(data)); 
         }, 
        failure: function(errMsg) { 
         console.log('failure'); 
         console.log(errMsg); 
         } 
        }); 
       }); 

さらに同じ問題があります。

UPD2。 request.dataのための出力を追加します。

@api_view(["GET", "POST"]) 
@permission_classes((AllowAny,)) 
@method_decorator(csrf_exempt, name='dispatch') 
def hello_world(request): 
    print(request.data) 
    if request.method == 'POST': 
     return Response({"message": "Got some data!", "data": request.data}) 

は受信：

<QueryDict: {}> 
[24/Oct/2017 13:57:19] "GET /test/?callback=jQuery21109646247308520148_1508842562290&key1=value1&_=1508842562293 HTTP/1.1" 200 27 
<QueryDict: {}> 
[24/Oct/2017 13:57:20] "GET /test/?callback=jQuery21109646247308520148_1508842562290&key1=value1&_=1508842562294 HTTP/1.1" 200 27 

UPD3。フロントエンドの一部を要求する変更AJAX：フロントエンド出力の

   $.ajax({ 
        method: "POST", 
        url: "http://127.0.0.1:8000/test/", 
        "data": data, 
        dataType: "jsonp", 
        success: function(inp_data){ 
         console.log('success'); 
         console.log(JSON.stringify(inp_data)); 
         alert(JSON.stringify(inp_data)); 
         }, 
        error: function(arg1, errMsg) { 
         console.log('failure'); 
         console.log(errMsg); 
         } 
        }); 

ガット：

failure (15:23:58:959 | null) 
    at public_html/index.html:124 
parsererror (15:23:58:961 | null) 
    at public_html/index.html:125 

UPD4：再び私のフロントエンドのコードを変更します。

：

   $.ajax({ 
        method: "POST", 
        url: "http://127.0.0.1:8000/test/", 
        "data": data, 
        success: function(inp_data){ 
         console.log('success'); 
         console.log(JSON.stringify(inp_data)); 
         alert(JSON.stringify(inp_data)); 
         }, 
        error: function(xhr, errMsg) { 
         console.log('failure'); 
         console.log(errMsg); 
         console.log(xhr.status + ": " + xhr.responseText); 
         } 
        }); 

を今私は、バックエンドでの権利要求を持っています

<QueryDict: {'key1': ['value1']}> 
[24/Oct/2017 15:52:12] "POST /test/ HTTP/1.1" 200 53 

しかし、フロントエンドで問題が発生しました：

failure (16:00:25:706 | null) 
    at public_html/index.html:123 
error (16:00:25:708 | null) 
    at public_html/index.html:124 
0: undefined (16:00:25:710 | null) 
    at public_html/index.html:125 

Answer 1

フロントエンドのAjaxコードでは、method: "POST"を使用してください。デフォルトでは、GETリクエストを送信しているため、期待した結果が得られません。詳細はthisを参照してください。

これが役に立ちます。