Question

我已经搜索了这个网站和其他地方试图解决我与jsonp的问题。开始时，这是我的代码：

url =  "http://mydomain.com/return_json";

$.ajax({
    url: url, // + '?callback=?' --I realized this is not necessary with dataType: 'jsonp'
    dataType: 'jsonp',
    crossDomain: true,
    error: function(xhr, status, error) {
            console.log(xhr);
            console.log(status);
            console.log(error);
        },
    success: function(dataWeGotViaJsonp){
        var text = '';
        var len = dataWeGotViaJsonp.length;
        for(var i=0;i<len;i++){
            item = dataWeGotViaJsonp[i];
            text += '<p>' + item + '</p>';
        }
        $('#action_target').html(text);
    }
});

在发送方，/return_json url是一个Django站点，它以下列方式发送json数据：

def return_json(request):

    data = [{'testing': 'testing'}, {'one': 1, 'two': 2, 'three': 3}]

    return HttpResponse( json.dumps(data), content_type="application/javascript" )

正如您在JavaScript中看到的那样，我错误地将所有内容转储到控制台中。这是输出：

Object { readyState=4, status=200, statusText="success"}
parsererror
Error: jQuery110207276483389928793_1377030169256 was not called

萤火虫的'net'区域显示该网址为： http://mydomain.com/return_json? callback=jQuery110209170565296948737_1377029879665&_=1377029879666

它还显示响应中有效的JSON。它甚至还有一个带有漂亮输出的JSON部分。所以，显然我的问题是jQuery自动生成的回调函数在那里，但没有被调用。我使用为jsonp设置的$ .ajax和$ .getJSON方法获得相同的结果。在这一点上我唯一可以想到的是，我应该以某种方式将json数据包装在发送方的一个函数中，但我的印象是接收器会处理这个问题。如果有人能够看到我做错了什么，那将非常感激。

=================================更新完全答案========== ==============

Hamish在下面有正确的答案，虽然它只需要两个小调整。以下是使用Django以JSONP格式发送数据的方法：

def return_json(request):
#                      ^--------I didn't need a parameter in this situation
json_data = ["one", "two", "three"]

return render_to_response("uitest/jsonp_template.html", Context({
    'callback': request.GET.get('callback'),
    'json': mark_safe(json.dumps( json_data )),
#                ^------------------------------This keeps your JSON from getting mangled in 
#                                               URL                                                      
}), mimetype="application/javascript")
#^---------------------This closing parentheses was missing in Hamish's answer at the time
#                      of this writing.

Answer 1

JSONP响应实际上是脚本响应 - 类似于：

callbackFunctionName([{'testing': 'testing'}, {'one': 1, 'two': 2, 'three': 3}]);

创建一个模板，该模板返回application/javascript响应，函数调用函数request.GET.get('callback')，其中JSON的主体为唯一参数。

类似的东西：

def return_jsonp(request, json_data)
    return render_to_response("jsonp_template.html", Context({
        'callback': request.GET.get('callback'),
        'json': json.dumps(json_data),
    }, mimetype="application/javascript")

jsonp_template.html只是：

{{ callback }}({{ json }});

jsonp回调函数没有用jQuery调用

1 个答案: