更新 - 已解决

Question

我在远程服务器上有一个带有此数据的student.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不是称为＆＃34;

当.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：＆＃39; callback＆＃39;。现在我的电话是这样的。

$.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/

谢谢大家

Answer 1

查看开发人员工具的“网络”标签也很重要。

你会发现：

Network
Network

希望这有帮助！

Answer 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'
});

尝试从远程位置加载json数据时出错

更新 - 已解决

2 个答案: