Question

我正在尝试使用jQuery进行跨域调用，但到目前为止还不成功。我的HTML文件位于我的'C：/ Temp'文件夹名称'test.html'上。我的HTML代码如下 -

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head> 
<body> 
<input id="first_name" type="text" value="khan" />
<input id="clickme" type="button" value="Click Me!"/>

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function(){
            $.ajax({
                url: 'http://localhost:8008/qm/profile/' + $("#first_name").val() + "/",
                type: "GET",
                dataType: "jsonp",
                crossDomain : true,
                success: function(response)
                    {
                        alert(response.responseText);
                    },
                error: function()
                    {
                        alert("fail");
                    },
            });
        });
    });

</script>

</body>
</html>

现在在服务器端，我有一个类似于此的小python代码 -

def profile(request, username):
    fullname = ''
    if username == 'khan':
        fullname = 'Khan Hannan'
    data = {'fullname': fullname}
    print data
    return HttpResponse(json.dumps(data))

python代码在DJango项目中。如果我直接调用URL（'http：// localhost：8008 / qm / profile / khan'），我会从服务器返回JSON响应，但是当我通过jQuery输入相同的URL时，我不知道得到任何回应，但都失败了。

有什么建议吗？

Answer 1

JSONP的工作原理是将JSON包装在一个函数中，然后执行该函数以获取代码对象。

这是通过向服务器发送一个回调查询字符串值来完成的，然后它假定用JSON对象包装。

如果您检查发送到服务器的请求，您应该会看到一个名为callback=jquery[long number]的发送值。

http://en.wikipedia.org/wiki/JSONP

Answer 2

您需要创建一个JSONP回调构造，其中JSON返回值将传递给callback请求参数中指定的回调函数。

Django Snippets网站有一个handy decorator for JSONP，可以为您解决此问题，并验证用户是否也经过了身份验证。

如果您不想使用该装饰器，请至少在响应中使用callback请求参数，并设置正确的内容类型：

return HttpResponse("%s(%s)" % (request.GET['callback'], json.dumps(data)),
    content_type='application/javascript'))

jQuery跨域调用

2 个答案: