嘗試從遠程位置加載json數據時出現錯誤

Question

我在遠程服務器上有一個此數據的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/

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

更新-解決

我像這樣的回調（{... data ...}）將數據包裝在students.json中，現在我的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/

感謝大家

Answer 1

同樣重要的是，查看開發人員工具的“網絡”標簽。

您會發現：

希望這可以幫助！

Answer 2

可能是因為該URL上禁止跨域Ajax調用。
您的代碼運行良好。 在這里看看jsfiddle

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 個解決方案

解決方案1
1 已采納 2014-03-24 08:49:43

解決方案2
0 2014-03-24 10:08:26

嘗試從遠程位置加載json數據時出現錯誤

問題描述

更新-解決

2 個解決方案

解決方案1 1 已采納 2014-03-24 08:49:43

解決方案2 0 2014-03-24 10:08:26

解決方案1
1 已采納 2014-03-24 08:49:43

解決方案2
0 2014-03-24 10:08:26