Javascript &引用；“无效标签”；当使用JSONP时？_Javascript_Ajax_Json_Jsonp_Syntax Error

Javascript &引用；“无效标签”；当使用JSONP时？

javascript ajax json

Javascript &引用；“无效标签”；当使用JSONP时？,javascript,ajax,json,jsonp,syntax-error,Javascript,Ajax,Json,Jsonp,Syntax Error,我的JSONP请求有问题。。数据不会显示，Firebug显示“无效标签”错误我的JavaScript： $.ajax({ url: link, dataType: "jsonp", beforeSend: function(xhr) { var base64 = btoa(username + ":" + password); xhr.setRequestHeader("Authorization", "Basic" + base64

我的JSONP请求有问题。。数据不会显示，Firebug显示“无效标签”错误

我的JavaScript：

$.ajax({
    url: link,
    dataType: "jsonp",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    jsonpCallback: "getResources"
})

function getResources(data) {
    alert(data);
    alert(JSON.parse(data));
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}

我的HTML：

<html>
<head>
    <title>Monitor</title>
    <link href="css/gadget.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="js/gadget.js"></script>
</body>

对JSONP调用的响应需要将JSON本身包装在函数调用中，其中被调用函数的名称通常在url中提供。jQuery会自动向请求的URL添加一个查询字符串参数“callback”，因此服务器上的脚本应该执行类似的操作：

// assuming that $JSON contains your JSON content
print "{$_REQUEST['callback']}( {$JSON} );";

将函数名添加到响应的原因是，JSONP请求实际上是附加到DOM的脚本标记，而不是XMLHttpRequest对象发出的常规请求。使用JSONP允许浏览器发出跨域请求，否则会被（默认情况下）应用于XHR的跨域策略阻止。

如果AJAX脚本托管在同一个域上，则可以使用

数据类型：“json”

如下所示：

function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});

如果服务器返回裸JSON数据，那么您将得到解析错误，因为JSONP请求大致类似于注入

标记。要理解为什么裸JSON对象文字会导致解析错误，请考虑以下示例：

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})

这是因为JSON不是一个有效的JS程序，但它正试图作为一个程序使用。找出JSONP没有按预期工作的原因。（顺便说一句，

getResources

看起来像是拼写错误。）请求可以正常工作。。我添加了一个带有响应的图像..响应不是JSONP，而是JSON。JSONP响应应该封装在函数调用中，比如

回调（{“foo”：“bar”}）

您发送请求的服务器似乎不支持JSONP请求，或者您没有正确执行调用。回答很好。只是一个补充。在我看来，有一个语法拼写错误——右大括号在错误的地方。必须打印“{$_请求['callback']（{$JSON}）}；”；这里，PHP使用大括号将变量插入字符串，因此

{$\u REQUEST['callback']}（{$JSON}）将在结果输出中打印为someCallback（{“my”：“JSON”}）
，假设$\u请求['callback']
是someCallback
，并且$JSON
相当于数组（“my”=>“JSON”）啊，我明白了，你说得对。当您计划在字符串中嵌入比$JSON（在本例中不需要大括号）更复杂的变量（如数组）时，大括号非常重要。
function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});

callback(
    {
        "groupStatus": []
    }
);

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})