带有jquery和jsonp的"无效标签"(跨域)

Question

我正在尝试使用jsonp从远程服务器获取数据,我遇到了一些问题.首先我遇到了身份验证问题,但是(我认为)现在还可以.无论如何,我在尝试我看起来像这样的代码时,在firebug上遇到"无效标签"错误:

$(function() {
var url = 'http://lifeloopdev.info/get_events?callback=?';
    $.ajax(url, {  
        dataType: "jsonp",
        data: "offset=0&num_items=10",
        username: 'username',
        password: 'password',
        jsonp: 'successCallback'
    });  
});  

function successCallback(data) {  
    $.each(data.success, function(i,item){
        $("body").append('<h1>' + item.title + '</h1>');
    });
};

我也尝试过没有成功函数(而不是jsonp:'successCallback'):

success: function(data) {  
        successCallback(data);
    }  

我的json文件:

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}

似乎ajax函数获取数据但是难以解析它或类似的东西.

如果你可以帮助我,我会更高兴,我花了最后4个小时试图找出它没有成功.非常感谢您抽出时间帮助我.

Aviram.

Answer 1

我乍一看错过了一些东西 - 你已经指定了你的JSON文件,我以为你说过你的JSON响应.您的问题的根源是响应必须是表单callbackFunctionName(jsonData).如果它没有以这种方式填充,你将invalid label在Firebug中得到错误,因为jQuery将尝试将响应解释为对函数的调用,但响应中不会有任何函数名称.

您$.ajax()对JSONP回调函数的使用现在稍微不正确,这导致了这个问题.分配的值jsonp表示查询字符串参数的名称 - 这应该与服务器期望的参数名称匹配.在您的情况下,看起来服务器期望参数名称callback而不是successCallback.它不是将在填充的JSON中使用的字符串.jsonpCallback可以指定此函数的名称 - successCallback如果您要使用命名函数而不是success函数,则应为其赋值.

假设服务器期望查询参数中的回调函数名称callback,您的代码应该是以下之一:

1. 默认情况下,jQuery将callback=?在您未指定jsonp变量时添加.请注意success在此代码段中使用回调函数.:

   $(function() {
       var url = 'http://lifeloopdev.info/get_events';
       $.ajax(url, {  
           dataType: "jsonp",
           data: "offset=0&num_items=10",
           username: 'username',
           password: 'password',
           success: function(data){
               $.each(data.success, function(i,item){
                   $("body").append('<h1>' + item.title + '</h1>');
               });
           }
       });  
   });  
   

   jQuery将尝试获取的URL将是http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=jQuery152035532653917078266_4305276802416.请注意,该字符串callback是一个查询字符串参数名称,它的值已由jQuery自动生成 - 这将最终调用您的success函数.

   响应应该是这样的 jQuery152035532653917078266_4305276802416({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

2. 如果您想使用自定义回调函数名称,请参阅以下代码:

   $(function() {
       var url = 'http://lifeloopdev.info/get_events';
       $.ajax(url, {  
           dataType: "jsonp",
           data: "offset=0&num_items=10",
           username: 'username',
           password: 'password',
           jsonpCallback: 'successCallback'
       });  
   });  
   
   function successCallback(data) {  
       $.each(data.success, function(i,item){
           $("body").append('<h1>' + item.title + '</h1>');
       });
   };
   

   在这种情况下,jQuery将尝试获取的URL将是http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=successCallback.正确的响应将导致successCallback调用named函数.

   在这种情况下,响应应该是这样的 successCallback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

如果您的回调函数查询字符串参数未被命名,callback而是类似cbfunc,则需要添加jsonp : 'cbfunc'到您的$.ajax()调用中.