Ajaxがurlをリクエストし、div内の応答を表示できません。

私はウェブサイトにajaxリクエストを作成し、その一部のみを表示しようとしています。私のコードはうまくいかず、私はその理由を見ることができません。また、どのようにオブジェクトを解析し、その一部だけを表示することができますか（1つのプロパティのみ）？どうもありがとう！Ajaxがurlをリクエストし、div内の応答を表示できません。

JS：

$(document).ready(function(){ 
    $('#buttonClick').on('click', 'button',function(){ 
    $.ajax('http://ShakeItSpeare.com/api/sentence', { 
    success: function(response){ 
     console.log(response) 
    //console.log of response works 
     $('.screen').html(response).fadeIn(); 
     } 
    }) 
    }); 
});

HTML

<body> 
    <div id="buttonClick"> 
<button>click Me</button> 
<ul class="screen"></ul> 
    </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

<script type="text/javascript" src="shakes.js"></script> 
</body>

出典

2016-09-07 javascript2016

HTMLに挿入しようとしているJSONプロパティー名を追加すると、その値だけが挿入されます。たとえば、以下のコードでは、 "response.sentence"に "sentence"プロパティを追加しました。戻って来ている応答はアプリケーションのコンテンツタイプを/持っている場合は、要求

$(document).ready(function(){ 
    $('#buttonClick').on('click', 'button',function(){ 

    $.ajax({url:'http://ShakeItSpeare.com/api/sentence', //Add url: and move the { 

    success: function(response){ 
     console.log(response) 
     $('.screen').html(response).fadeIn(); 
     } 
    }) 
    }); 
});

内のURLキーが欠落しているように見えますWorking Codepen

出典

2016-09-07 19:57:20

ありがとうございますが、何もdivに表示されていません。なぜ見えますか？ – javascript2016

このコードを試してみてください。 –

ありがとうございました！それは今働きます！ .htmlが動作していなかった理由を説明してください。違いはなんですか？ありがとう!! – javascript2016

まあ..あなたがオブジェクトから文字列を取得する必要があります。

$(document).ready(function(){ 
    $('#buttonClick').on('click', 'button',function(){ 
    $.ajax('http://ShakeItSpeare.com/api/sentence', { 
    success: function(response){ 
     console.log(response) 
    //console.log of response works 
     $('.screen').html(response["sentence"]); // Changed this one from "response" to "response["sentence"] 
     } 
    }) 
    }); 
}); 


Object {sentence: "Nor goodly ilion stand.", markov: 2}

またはそれを文字列化します。

出典

2016-09-07 19:54:09 Slatyoo

をIコンソールにログオンするときにオブジェクトを取得していますが、私の主な質問は、なぜdivに表示できないのですか？なぜコードが間違っているのか分かりません。何も表示されていません – javascript2016

レスポンスは "sentence"と "markov"を持つオブジェクトです。文章を取得したい場合は、オブジェクトに限らずDOMに "response.sentence"または "response [" sentence "]"を与えなければなりません。 – Slatyoo

私は今それをする！ $（ '。screen'）.html（response.sentence）.fadeIn（）; $（ '。何も表示されていません。 – javascript2016

：コードペンの作業

$(document).ready(function(){ 
    $('#buttonClick').on('click', 'button',function(){ 
    $.ajax('http://ShakeItSpeare.com/api/sentence', { 
    success: function(response){ 
     console.log(response) 
     //changed original code from ".html(response)" to ".html(response.sentence)" 
     $('.screen').html(response.sentence).fadeIn(); 
     } 
    }) 
    }); 
});

JSON.parse（）を実行する必要はありません。json形式であるが文字列の場合は、JSON.parse（）を使用してデータをオブジェクトとして使用できます。

console.log（応答）を実行すると、オブジェクト全体が表示されます。

出典

2016-09-07 19:59:19 BHinkson

そのURLを見ると、応答がContent-Typeである：アプリケーション/ JSON – BHinkson

おかげで、何も、まだのdiv内に表示されていない.. – javascript2016

これは私のために働いたが、<！DOCTYPE HTML> – BHinkson

-1

は、私は、この構造を使用するにconsole.log（レスポンス）

出典

2016-09-07 20:02:58 OsamaKhalid

得策ではなく、まったく – DelightedD0D

後にセミコロンを置く：あなたのコメントに基づいて

$(document).ready(function() { 
      $('#buttonClick').on('click', 'button', function() { 
       $.ajax({ 
        type: "GET", 
        url: "http://ShakeItSpeare.com/api/sentence", 
        success: function(response) { 

         console.log(response); 
         console.log(response.sentence); 
         console.log(response.markov); 
         //console.log of response works 

         $('.screen').html(JSON.stringify(response)).fadeIn(); 
         //$('.screen').html(response.sentence).fadeIn(); 

        }, 
        error: function(xhr, status, error) { 
         var err = eval("(" + xhr.responseText + ")"); 
         console.log(err.Message); 
        } 
       }); 
      }); 
     });

代替方法：

$(document).ready(function() { 
     $('#buttonClick').click(function() { 
      $.ajax({ 
       type: "GET", 
       url: "http://ShakeItSpeare.com/api/sentence", 
       dataType:'text', // specify dataType as text and you wont need to convert the JSON 
       success: function(response) { 
        //console.log of response works 
        $('.screen').html(response).fadeIn(); 

       }, 
       error: function(xhr, status, error) { 
        var err = eval("(" + xhr.responseText + ")"); 
        alert(err.Message); 
       } 
      }); 
     }); 
    });

出典

2016-09-07 20:05:07 DelightedD0D

を必要としますが、私は全体のオブジェクトを表示することができます知っていますか？これまでのところ、私はresponse.sentenceなどと言うが応答だけではないと言ったときにしか表示できないのですか？ .JSON.parse（応答）がうまくいきません。 – javascript2016

@ javascript2016もちろん、オブジェクトを文字列に変換する 'JSON.stringify（response）'を使用してください。上記の更新を参照してください。 JSON.parseは文字列をオブジェクトに変換し、必要に応じて文字列をオブジェクトに変換します。 – DelightedD0D

@ javascript2016また、ajaxオプションオブジェクトで 'dataType： 'text'、'を指定することもできます。オブジェクトを一切変換する必要はありません。上の新しいアップデートを参照してください。 – DelightedD0D

Ajaxがurlをリクエストし、div内の応答を表示できません。

答えて

関連する問題