2017-10-29 22 views
0

私はこれらの記事を複数読んだことがありますが、私にとっては何も役に立たなかったので、誰かが助けてくれたら本当に感謝します。私のWebページ上のHTML要素にFull_Nameフィールドを表示しようとしています。PHPの結果がHTMLで表示されない

次のようにPHPファイルは次のとおりです。

{"Test_Info": { 
    "Company_Info": { 
     "Company_ID": "2", 
     "Company": "Test Company", 
     "Full_Name": "Test User" 
    }} 

私は私のHTMLコードのボディに以下のコード使用しています:

<body id="startscreenBG"> 

     <div class="hello"> </div> 

</body> 
     <script> 
        $.ajax({ 
        type:'GET', 
        url:'jsondata.php', 
        data:'json', 
        success: function(data){ 
          var newhtml = ''; 
          $.each(data, function(i, item) { 
            newhtml +='<div>'+ item.Full_Name +'</div>'; 
          }); 
          $('.hello').html(newhtml); 
          }}) 
     </script> 
</html> 
+0

チェック 'エラーログ:あなたのAJAX呼び出しをする必要があります'と' console.log'でもあります。 – Pedram

+1

JSONデータはPHPではありません。しかし真剣に、私はあなたのAjaxコールバックで 'console.log(data)'を実行して、そのJSONがJSONであり、文字列ではないかどうかを確認します。文字列の場合は、JSONを出力する前に 'application/JSON'コンテンツヘッダ' header( 'Content-Type:application/json')を追加する必要があります。 – ArtisticPhoenix

+1

あなたの質問に投稿したPHPスニペットにスペルミスがありますが、有効なJSONオブジェクトが保持されていないかどうかは不明です。あなたはエンディング '}'がありません。 – agrm

答えて

1

をそれはあなたが直面しているHTMLの問題ではないのですが、データループの問題。コンソール(F12)を開き、XHR要求が実際に期待通りの結果を返すことを確認します。次に、書き込み:デバッガ;行の上のvar newhtml = '';を入力し、データの内容を確認してください。

次に、あなたが期待するよう、あなたのループ機能が動作することを確認してください:「FULL_NAME」:

$.each(data, function(i, item) { 
    debugger; 
}); 

あなたは「項目」変数は属性を持つあなたの期待オブジェクトを保持していないことを理解するであろう。

基本的に問題に遭遇したときに解決できる方法は、コードをステップバイステップでデバッグし、すべての機能が想定していることを実行していることを確認してください。

このシナリオでは、「データ」のような漠然とした名前を使用しているためです。あなたのコンテンツは実際には "unparsedCompanyCollection"を保持しています。私はまた、正確な変数名に慣れておくことをお勧めします。そして、それはデバッグや長期にわたるクリーンなコードで一般的に役立ちます。

0

ただの推測ですが、実際のjsonデータではなく、Jsonデータの文字列を返している可能性があります。通常、コンテンツヘッダーを追加して出力する前に修正することができます。あなたに

JSONはあなたのデータを出力する前に

header('Content-Type: application/json'); 

を追加しますPHPファイル。あなたのsuccess callbackあなたはそれを修正するために

... 
    success: function(data){ 
     console.log(data); // Or even just alert(data); if it's a string then you know. 
     ... 
    } 

もう一つの方法は、JSON.parse(data)

0

であなたがdataType:'json'data:'json'を変更する必要がある見るためにいくつかのデバッグを行うことができますで

。また、item.Full_Nameを出力しようとしています。これはitem.Company_Info.Full_Nameである必要があります。

$.ajax({ 
    type:'GET', 
    url:'jsondata.php', 
    dataType:'json', 
    success: function(data){ 
     var newhtml = ''; 
     $.each(data, function(i, item) { 
      newhtml +='<div>'+ item.Company_Info.Full_Name +'</div>'; 
     }); 
     $('.hello').html(newhtml); 
    } 
}); 

そして、あなたは有効なJSONオブジェクトを保持するために、あなたのPHPを修正する必要があります(あなたがあなたの質問に投稿されたコードで終わる}が欠落している注意してください)

{"Test_Info": { 
    "Company_Info": { 
     "Company_ID": "2", 
     "Company": "Test Company", 
     "Full_Name": "Test User" 
    } 
}} 
+0

ありがとう、私はajax呼び出しを修正するために管理しているし、また、jsonオブジェクトが正しいことを確認しました。私はコードを再実行し、エラーは発生しませんでしたが、それでも何も出力されません。問題の原因となる可能性があることは分かりますか? –

+0

'success:function(data){console.log(data)}'を実行すると、コンソールに表示される内容は? – agrm

+0

そして 'header( 'Content-Type:application/json');をPHPに[@ArtisticPhoenix suggest](https://stackoverflow.com/a/46999132/2311559)として追加しようとしましたか? – agrm

関連する問題