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

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

javascript jquery html ajax json

Javascript 尝试从远程位置加载json数据时出错,javascript,jquery,html,ajax,json,Javascript,Jquery,Html,Ajax,Json,我在远程服务器上有一个students.json文件，其中包含此数据 { "studentId":101, "firstName":"Carissa", "lastName":"Page", "emailId":"laoreet.libero.et@Mauris.net" } 现在我尝试使用jQuery.ajax（）从不同的服务器（跨域）读取students.json 这是我的html页面 <!doctype html> <html> <head> <

我在远程服务器上有一个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>

在我的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 );
    }
});

$.ajax({
网址：'http://rupeshreddy.com/students.json',
数据类型：“jsonp”，
jsonpCallback:“回调”，
成功：功能（数据）{
控制台日志（数据）；
var输出；
输出='学生'；
输出+='First Name'+data.firstName+''；
输出+='Last Name'+数据.lastName+''；
输出+='Student Id'+data.studentId+''；
$（“#studentdisplay”）.html（输出）；
}
});

工作中间链路

谢谢大家

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

你会发现：

希望这有帮助

可能是因为该URL上禁止跨域Ajax调用。
你的代码工作得很好

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

$.ajax({
//将请求发布到/echo/json/并指定正确的数据类型
url:“/echo/json/”，
数据类型：“json”，
数据：数据，
成功：功能（数据）{
//您可以准确地返回json中发送的内容
控制台日志（数据）；
var输出；
输出='学生'；
输出+='First Name'+data.firstName+''；
输出+='Last Name'+数据.lastName+''；
输出+='Student Id'+data.studentId+''；
$（“#studentdisplay”）.html（输出）；
},
类型：“POST”
});

是否触发了您的ajax调用错误块？@Felix如果我使用数据类型：“json”，我在开发人员工具中得到此消息，但未能加载资源：请求的资源上不存在“Access Control Allow Origin”标头。因此不允许访问源代码“”。@dreamweiver是ajax调用的错误块被触发，并抛出以下“错误解析器错误-错误：jQuery11006872769086621702_1395648763612未被调用”我尝试像这样包装json数据（{…}）和（{…}）；在json文件中，但仍然得到相同的错误。我想我错过了一些小东西，我不知道它是什么。无论如何，谢谢你推荐开发工具。你需要把它包装在回调告诉你的任何东西里。PHP中的类似内容：

（{your json here}）

我没有使用PHP生成json，我有一个包含数据的直接json文件。然后你需要告诉jQuery你将使用什么

回调

，并用该回调包装你的json。我按照你的建议更改了我的student.json，我将数据包装成这个回调（{….data..}）在ajax调用“jsonpCallback:‘callback’”中添加了这一行，它成功了。它的一部分是基于它似乎这个例子模拟相同的领域或相同的起源。当两个文件都在同一个域中时，我的代码可以正常工作，但当它们在不同的服务器（跨域）上时，我希望它可以正常工作。@Rup这就是我所说的

跨域ajax请求可能会在该URL上被阻止。这个演示只是向你展示你的代码是完美的。
<div id="studentdisplay">
    <p>Getting Student Details</p>
</div>

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