ajax - Jquery ajax调用抛出语法无效标签错误

Question

我正在尝试对返回 json 对象的服务器进行 ajax 调用，但它无法正常工作......无法弄清楚有什么问题请帮助......这是代码：

$.ajax ({
        type : "GET",
        url : "http://api.zero1.org/v1/artists",
        data : "",
        dataType : "jsonp"
    }).done (function(msg){
        var artistNames = msg.artists[0].name;

        for (var i = 0; i < artistNames.length; i++) {
            console.log(artistNames[i])
            $('div#artists').html(function() {
                return '<li><a href="details.html"><h3 class="ul-li-heading">' + artistName[i] + '</h3><p class="ul-li-desc">artist/location</p></a></li>'
            });
        } 
    })

JSON 对象是这样的：

{
    artists: [
              {
                artistid: "5",
                name: "Outdoor Urban Scene  ",
                bio: "", 
                programs: [
                            1,
                            2,
                            3,
                            4 
                           ]
              },
              {
                artistid: "87",
                name: "Radames  Ajna",
                bio: "Technical development of Mobile Crash v2",
                programs: [
                            1,
                            2,
                            3,
                            4
                          ]
              }
            ]
}

Answer 1

您尝试使用的资源不支持 JSONP。必须正确配置服务器才能处理 JSONP 请求。

您可以编写自己的一些服务器端代码来处理 JSON 并提供它，或者您可以使用 Yahoo 的 HQL 之类的服务：

$.ajax({
    url: 'http://query.yahooapis.com/v1/public/yql',
    data: {
        q: 'select * from json where url="http://api.zero1.org/v1/artists"',
        format: 'json'
    },
    type: 'get',
    dataType: 'jsonp'
})

Answer 2

请尝试在crossDomain您的 ajax 调用中添加选项。您的代码必须以;

$.ajax ({
        type : "GET",
        url : "http://api.zero1.org/v1/artists",
        data : "",
        dataType : "jsonp",
        crossDomain: true
    }).done (function(msg){
        var artistNames = msg.artists[0].name;

        for (var i = 0; i < artistNames.length; i++) {
            console.log(artistNames[i])
            $('div#artists').html(function() {
                return '<li><a href="details.html"><h3 class="ul-li-heading">' + artistName[i] + '</h3><p class="ul-li-desc">artist/location</p></a></li>'
            });
        } 
    });