Question

这是Microsoft Virtual Academy课程的基本示例我不知道为什么，但我无法从json文件中获取数据。每次点击“获取JSON数据”，我都会看到提示There was a problem with the server. Try again soon!
我是否需要一些特殊的东西来访问json文件或代码是错误的？我正在使用Microsoft WebMatrix运行此测试站点。但据我所知，json应该像javascript或html一样工作，我的意思是“没有服务器”。

请让我知道我该怎么做才能理解为什么这段代码不起作用。

$(function() {
  
  $('#clickme').click(function() {
   $.ajax({
       url: 'data19.json',
       dataType: 'json',
       success: function(data) {
          var items = [];

          $.each(data, function(key, val) {

            items.push('<li id="' + key + '">' + val + '</li>');    

          });

          $('<ul/>', {
             'class': 'interest-list',
             html: items.join('')
          }).appendTo('body');

       },
      statusCode: {
         404: function() {
           alert('There was a problem with the server.  Try again soon!');
         }
       }
    });
  });

});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>JavaScript Example</title>

	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="script19.js"></script>
	
</head>
<body>
	<h1 id="title">19. Using jQuery to retrieve JSON via AJAX</h1>
	
	<a href="#" id="clickme">Get JSON Data</a>
</body>
</html>

data19.json文件的内容

{
    "one": "Learned Optimism",
    "two": "Deliberate Practice",
    "three": "Getting Things Done"
}

编辑：
所有文件在一个文件夹中彼此相邻。
index.html的
script19.js
data19.json

编辑13.01.2016：
以下代码有效。 问题是web serwer配置 - IIS Express（Microsoft Webmatrix）。 AJAX需要使用 CORS - 跨源资源共享。我仍然无法正确配置IIS Express，以获取对json文件的访问权限，但我已经使用提供商的托管测试了此代码。

Answer 1

请将所有js文件放在js /等文件夹中。或者对于当前场景，将data19.json文件放在script19.js所在的位置。这将成功运行代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <h1 id="title">19. Using jQuery to retrieve JSON via AJAX</h1>

<button id="clickme">Get JSON Data</button>
<script>
    $(document).ready(function() {
      $('button').on('click', function() {
        alert('on click');
       $.ajax({
           url: 'data.json',
           dataType: 'json',
           success: function(data) {
              var items = [];
              alert('abc');

              $.each(data, function(key, val) {
                items.push('<li id="' + key + '">' + val + '</li>');    
              });

              $('<ul/>', {
                 'class': 'interest-list',
                 html: items.join('')
              }).appendTo('body');

           },
          error: function() {
               alert('There was a problem with the server.  Try again soon!');
             }
        });
      });

    });
</script>

Answer 2

404表示找不到该网址。尝试将'data19.json'文件放在与脚本文件相同的文件夹中。

Answer 3

在我尝试调试代码时 - 附加到$（＆＃39;＃clickme＆＃39;）选择器的点击功能未被触发。另外，请检查＆＃34; script19.js＆＃34;的路径。 - 此文件在控制台上抛出404错误。

使用jQuery通过AJAX

3 个答案: