Question

我有这样的文件夹结构。

[网站]
- [js]
- [json]
  - hints.json
- page.html中

现在，当我启动page.html时，我有一个按钮，当我点击时将加载我的hints.json文件。这是我加载json的脚本。

$(function(){

  var jsonURL = "json/hints.json";
  var butt = $('.button .hints li');
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(value){
        console.log(" title = ", value.intro[0].title);
    });



  }); 

});

Json文件结构。

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

任何人都可以告诉我为什么这不起作用。

更新：这是在本地测试的，而不是从服务器测试的。

这是一个jsfiddle示例，即使我试图让它在本地工作。 http://jsfiddle.net/r3bPC/1/

Answer 1

Json文件结构。

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": Title text for page active, "copy": "copy text"}
             ]
}

转入http://jsonlint.com/ ....

Parse error on line 14:
...           "title": Titletextforpageacti
-----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '['

那是你的问题。

第2部分

抓住JS：

$(function(){

  var jsonURL = "json/hints.json";
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(json){
        // $("#title").text(json.name);
        console.log(" title = ", json.intro[0].title);
    });

});

通过http://jshint.com/ ...

运行它

Errors:

Line 4 butt.find('a').click(function(evt){
'butt' is not defined.
Line 1$(function(){
Unmatched '{'.
Line 11});
Expected ')' and instead saw ''.
Line 11});
Missing semicolon.

那是你的另一个问题。

ps，未定义的枪托吓到了我。

Answer 2

完整的经过验证的代码，

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){    
$.ajax({
type:'GET',
url:'hints.json',
dataType:'json',
success:function(json){
alert(json.intro[0].title); //this alerts title text
},
error:function(){
alert("dssdsdd");
}
});


});

</script>

或

$.getJSON("hints.json", function(json){

        alert(json.intro[0].title);
    });

hints.json

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

getJSON success callback

var jqxhr = $.getJSON("hints.json", function() {
  alert("success");
  alert(json.intro[0].title);
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

JSON文件没有加载

2 个答案: