使用javascript从JSON文件读取时出现问题

时间:2011-06-03 01:45:28

标签: javascript jquery html json

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
    $(function() {


        $("#Button1").click(function() {

           $.getJSON("ticketPriceInArray.js", 
        function(json) {
       var ticketPriceArray=[json.tickets[0].price, json.tickets[1].price,               
                json.tickets[2].price, json.tickets[3].price, json.tickets[4].price, 
                json.tickets[5].price];

                         alert(json.tickets[0].type);

         var inputWord =$("#keyword").val();
             if (inputWord=="A"){$("#result").text(ticketPriceArray[0]);}   
             if (inputWord=="B"){$("#result").text(ticketPriceArray[1]);}
             if (inputWord=="C"){$("#result").text(ticketPriceArray[2]);}   
             if (inputWord=="D"){$("#result").text(ticketPriceArray[3]);}   
             if (inputWord=="E"){$("#result").text(ticketPriceArray[4]);}   
             if (inputWord=="F"){$("#result").text(ticketPriceArray[5]);}       
         });

       });
  });    
  </script>

这是“ticketPriceInArray.js”

{ 
"tickets":[
      {
    "type":"A Ticket",
    "price":220,
  },

  {
    "type":"B Ticket",
    "price":180,
  },

  {
    "type":"C Ticket",
    "price":120,
  },

  {
    "type":"D Ticket",
    "price":100,
  },

  {
    "type":"E Ticket",
    "price":80,
  },

  {
    "type":"F Ticket",
    "price":50,
  }
  ]
}

这是一个简单的html,当相应的文本输入时,相应的票价将在按下按钮后显示在html中。所有故障单信息都存储在名为“ticketPriceInArray.js”的.json文件中,我一直在尝试使用$ .getJSON()读取它,但遗憾的是我无法取得任何成功。奇怪的是我没有得到任何警告,所以我无法解决它。请看看你是否可以给我任何建议。谢谢。

4 个答案:

答案 0 :(得分:2)

通过添加AJAX错误处理程序,我收到了

"parsererror" SyntaxError: Unexpected token }

问题是每个价格属性后面的尾随逗号。

答案 1 :(得分:1)

解决这个问题的方法有点不同。这假设您没有根据传递给网址的某些数据更改机票价格。

ticketPriceInArray.js

{ 
    "A" : 220,
    "B" : 180,
    "C" : 120,
    "D" : 100,
    "E" : 80,
    "F" : 50
  };

主档

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>

<script type="text/javascript">

  var ticket_prices = {};

  $(function() {
     $("#Button1").click(function() {

        $.getJSON("ticketPriceInArray.js", function(returnedJSON) {
            ticket_prices = returnedJSON;
            $("#result").text( ticket_prices[ $("#keyword").val() ] );
        });

     });
  });    
</script>

如果有任何考虑因素(或有关我的假设的问题),请告诉我,我会根据此更新。

答案 2 :(得分:1)

以下示例在FF和Chrome中使用您提供的确切JSON正常工作。在IE中,你必须在价格之后删除逗号,正如Phil已经说过的那样。

在我的测试中,test.html和test.js都放在我的apache服务器根目录中;由于安全限制,直接从我的桌面查看文件到我的浏览器显然不起作用。

<html>
<head></head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $.getJSON("test.js", function(json) {
                    for (var i in json.tickets) {
                        var type = json.tickets[i].type;
                        var price = json.tickets[i].price;
                        $('#result').append('<span>type: ' + type+ ', price: ' + price + '</span><br />');
                    }
                });
            });
        });
    </script>
    <button id="Button1">click me</button>
    <div id="result"></div>
</body>
</html>

我建议您使用http://jsonlint.com/来验证您的JSON;或者只是依靠一个好的编码器而不是手工操作;)

答案 3 :(得分:0)

假设以下事实:

  • 你正在使用firefox
  • 单击#Button1
  • 时,网络选项卡中没有流量
  • 没有记录错误

......我想说:
您点击的元素不是$("#Button1")

您确定您点击的元素是否具有ID“Button1”,并且使用该ID的只有一个元素?

您是从网络服务器还是从本地文件系统运行它?