【问题标题】：Getting an error when trying to load json data from remote location尝试从远程位置加载 json 数据时出错
【发布时间】：2014-03-25 00:49:49
【问题描述】：

我在远程服务器上有一个包含这些数据的 students.json 文件

{
"studentId":101,
"firstName":"Carissa",
"lastName":"Page",
"emailId":"laoreet.libero.et@Mauris.net"
}

现在我正在尝试使用 jQuery.ajax() 从不同的服务器（跨域）读取students.json。

这是我的html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Metadata Test Page</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="studentdisplay">
    <p>Getting Student Details</p>
</div>
</body>
</html>

我的 JavaScript 文件中有这段代码

$(document).ready(function() {

$.ajax({
      type: 'GET',
      url: 'http://rupeshreddy.com/students.json',
      contentType: "application/json",               
      dataType:"jsonp",
      success: function (data) {

           var output;
           output = '<table><tr><th colspan=2>Student</th></tr>';
           output += '<tr><td>First Name</td><td>'+ data.firstName +'</td></tr>';
           output += '<tr class="alt"><td>Last Name</td><td>'+ data.lastName +'</td></tr>';
           output += '<tr><td>Student Id</td><td>'+ data.studentId +'</td></tr></table>';

          $("#studentdisplay").html( output );         
      }
})

.error(function(jqXHR, textStatus, errorThrown){
        $("#studentdisplay").html(textStatus+" - "+errorThrown);

      });    
});

当我打开网页时出现此错误：

parsererror - 错误：jQuery111006872769086621702_1395648763612 不是叫”。

当 .html 和 .json 文件在同一台服务器上时，同样的代码可以正常工作（当然数据类型将是 json）。仅当两个文件位于不同的服务器时才会发生错误。

我浏览了很多过去的问题和文章，但没有一篇能帮助我解决这个问题。感谢您提供任何帮助和建议。

链接到 JSFIDDLE http://jsfiddle.net/rL5fK/1/

================================================ ====

更新 - 已解决

我将我的数据包装在students.json中，就像这个回调({...data...}) 现在我的 student.json 是这样的

callback({
"studentId":101,
"firstName":"Carissa",
"lastName":"Page",
"emailId":"laoreet.libero.et@Mauris.net"
})

在我的 ajax 调用中，我添加了附加行 jsonpCallback: 'callback'。现在我的电话是这样的。

$.ajax({
    url: 'http://rupeshreddy.com/students.json',
    dataType: "jsonp",
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);


        var output;
           output = '<table border="1"><tr><th colspan=2>Student</th></tr>';
           output += '<tr><td>First Name</td><td>'+ data.firstName +'</td></tr>';
           output += '<tr class="alt"><td>Last Name</td><td>'+ data.lastName +'</td></tr>';
           output += '<tr><td>Student Id</td><td>'+ data.studentId +'</td></tr></table>';

          $("#studentdisplay").html( output );
    }
});

工作 JSFIDDLE 链接http://jsfiddle.net/esWSH/2/

谢谢大家

【问题讨论】：

你的ajax调用错误块被触发了吗？
@Felix 如果我使用 dataType:"json" 我在开发人员工具中得到这个加载资源失败：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'localhost'。
@dreamweiver 是的 ajax 调用的错误块被触发，并抛出此“错误解析器错误 - 错误：未调用 jQuery111006872769086621702_1395648763612”

标签： javascript jquery html ajax json

【解决方案1】：

查看开发者工具的“网络”选项卡也很重要。

你会发现这个：

希望这会有所帮助！

【讨论】：

我尝试像这样 ({...}) 和 ({...}) 包装我的 json 数据；在json文件中，但仍然得到同样的错误。我想我错过了一些小东西，我无法弄清楚它是什么。无论如何，感谢您推荐开发者工具。
您需要将其包装在回调告诉您的任何内容中。类似这样的 PHP：<?=$_GET['callback']?>({your json here})
我没有使用 PHP 来生成我的 JSON，我有一个包含数据的直接 JSON 文件。
然后你需要告诉 jQuery 你将使用什么callback，并用那个回调包装你的 JSON。
我按照你的建议更改了我的 student.json，我像这个回调（{....Data ..}）一样包装了我的数据，在 ajax 调用“jsonpCallback：'callback'”中添加了这一行，它奏效了。部分基于stackoverflow.com/questions/8673050/jquery-ajax-calls-failing

【解决方案2】：

可能是因为在该 URL 上禁止跨域 Ajax 调用。
您的代码运行良好。 Have a look at the jsfiddle here

HTML

<div id="studentdisplay">
    <p>Getting Student Details</p>
</div>

Javascript

$.ajax({
    //post the request to /echo/json/ and specify the correct datatype
    url: '/echo/json/',
    dataType: 'json',
    data: data,
    success: function (data) {
        //you get back exactly what you sent in the json 
        console.log(data);
        var output;
        output = '<table><tr><th colspan=2>Student</th></tr>';
        output += '<tr><td>First Name</td><td>' + data.firstName + '</td></tr>';
        output += '<tr class="alt"><td>Last Name</td><td>' + data.lastName + '</td></tr>';
        output += '<tr><td>Student Id</td><td>' + data.studentId + '</td></tr></table>';
        $("#studentdisplay").html(output);
    },
    type: 'POST'
});

【讨论】：

这个例子似乎模拟了相同的域或相同的来源。当两个文件在同一个域中时，我的代码可以正常工作，但是当它们在不同的服务器上（跨域）时希望它可以工作。
@Rup 这就是我所说的cross domain ajax request's might be blocked on that URL。这个演示只是为了向您展示您的代码是完美的。