2016-05-02 8 views
1

json-dataで構成されるhtmlファイルから名前をロードしようとしています。問題は、ページが空白/白であり、Firefoxのデバッガにエラーメッセージが表示されないことです。jsondataをテキストファイルからロードするときの空白のページ

test.htmlとpersondb.htmlは同じサーバーにあります。

test.htmlという

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>JSON Exempel</title> 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
</head> 
<body> 

<ul id="person-lista"> 

</ul> 

<script> 

$.ajax({ 
    url: "http://www.mywebbpage.com/ajax/persondb.html", // not the realname 
    data: { 
     limit: 5, 
     name: 'ra' 
    }, 

    success: function (response) { 

     var personArray = response.personer; 
     for(var i=0; i < personArray.length; i++) { 
      var person = personArray[i]; 
      $('#person-lista').append('<li>' + person.fnamn + '</li>'); 
     } 
    } 
}); 

</script> 
</body> 
</html> 

{ 
"personer": [{ 
    "fnamn": "RACHELLE", 
    "enamn": "ZWIEFELHOFER", 
    "epost": "[email protected]" 
}, { 
    "fnamn": "RACQUEL", 
    "enamn": "JOH", 
    "epost": "[email protected]" 
}, { 
    "fnamn": "RAE", 
    "enamn": "BRAVARD", 
    "epost": "[email protected]" 
}, { 
    "fnamn": "RAFAEL", 
    "enamn": "SAGASTUME", 
    "epost": "[email protected]" 
}, { 
    "fnamn": "RAISA", 
    "enamn": "REINES", 
    "epost": "[email protected]" 
}] 
} 

persondb.htmlはpersondb.htmlが正しくフォーマットされていないのですか?その理由は何ですか?ブラウザにpersondb.htmlをロードすると、次のように表示されます。

{ "personer": [{ "fnamn": "RACHELLE", "enamn": "ZWIEFELHOFER", "epost": "[email protected]" }, { "fnamn": "RACQUEL", "enamn": "JOH", "epost": "[email protected]" }, { "fnamn": "RAE", "enamn": "BRAVARD", "epost": "[email protected]" }, { "fnamn": "RAFAEL", "enamn": "SAGASTUME", "epost": "[email protected]" }, { "fnamn": "RAISA", "enamn": "REINES", "epost": "[email protected]" }] } 

「同じ起源ポリシー」に問題がありますか? EatPeanutButterが述べたようにあなたは、JSONを解析する必要が

success: function (response) { 

    var res = JSON.parse(response); 
    var personArray = res.personer; 
    for(var i=0; i < personArray.length; i++) { 
     var person = personArray[i]; 
     $('#person-lista').append('<li>' + person.fnamn + '</li>'); 
    } 
} 
+0

開発者コンソール(chormeとfirefoxのF12)でエラーが発生しましたか? –

+0

@GummaMocciaro - エラーは一切ありません – java

答えて

1

であるあなたは、あなたのループの中でそれにアクセスする前に、あなたのJSONをパースする必要がありますあなたのhtmlページの応答で正しいContent-Type(application/json)を送信しなければなりません。 あなたのJSONは整形式です。

+0

はい - ただし、絶対URL文字列は、ブラウザに「同じ発信元ポリシー」に基づいてリクエストをブロックさせました。文字列を "persondb.html"に短縮するだけで効果があります – java

0

、またはあなた - しかし、ファイルが同じサーバー(同じフォルダ)に

関連する問題