为啥 jQuery ajax jsonp 请求会出错？

Posted 2023-02-24

【中文标题】为啥 jQuery ajax jsonp 请求会出错？

【英文标题】：Why jQuery ajax jsonp request gives error?为什么 jQuery ajax jsonp 请求会出错？

【发布时间】：2012-07-11 21:02:03

【问题描述】：

"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) 
            oSettings.jqXHR = $.ajax( 
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "error":function(msg)
                    alert(msg);
                ,
                "dataType": "jsonp",
                "cache": false
             );
        ,

当我发出请求时，服务器会给出响应。

Status Code: 200 OK
Cache-Control: max-age=0
Content-Language: en
Content-Type: application/javascript
Expires: Thu, 12 Jul 2012 06:23:18 GMT
Last-Modified: Thu, 12 Jul 2012 06:23:18 GMT
Vary: Accept-Language, Cookie

以及响应正文中的 json 数据。

但是 ajax 代码说它有一个错误，并进入“错误”代码块。

为什么它在状态为 200 时给出错误？

更新：

在 Django 服务器代码中：

            response_dict =                 
            response_dict.update('aaData': aaData)
            response_dict.update('sEcho': sEcho, 'iTotalRecords': iTotalRecords, 'iTotalDisplayRecords':iTotalDisplayRecords, 'sColumns':sColumns)
            response = HttpResponse(simplejson.dumps(response_dict), mimetype='application/javascript')

【问题讨论】：

你能显示出sUrl的真正价值吗？

/category/list/ 是 sUrl。

@Burak，我已经更新了我的答案，检查它是否适合你

【参考方案1】：

服务器响应是否包含带填充的 JSON？

你看，从不同域接收数据有两种方式：

CORS 是新的，但需要从服务器发送单独的 Access-Control-Allow-Origin 标头。浏览器的支持也有所限制。

JSONP 不依赖服务器标头，而是要求它使用所谓的'填充'发回 JSON 数据：

callback('"your": ["json", "data"')

然后，您的 JavaScript 库（在本例中为 jQuery）将其包装到一个新的 script 标记中，诱使您的浏览器对其进行评估。在这个 callback 函数中，jQuery 解析 JSON 数据并将其发送到您的 fnCallback。之后，它会从页面中删除不必要的 script 标记。一般来说，这是一个非常脆弱的解决方案，但它在实践中有效。例如，如果服务器不填充 JSON 数据，您最终会在 script 标记内得到以下代码：

'"your": ["json", "data"'

请注意，它只是一个字符串，什么都不做。因此，请检查服务器是否发送包装的 JSON 而不是原始 JSON。我之前遇到过很多次同样的问题，这对我有帮助。

---

编辑：由于您发布了服务器端代码，我假设您可以修改它。我从来没有玩过 Django，但我会尝试给你一些提示：

在您收到的request 内应该有一个名为callback 的参数——这是jQuery 发送给您的内容，也是您应该用于填充的内容。放在某处：

# Like I said I don't know the exact API but you get the idea
callback = request.GET["callback"]

之后pad您的回复，然后再发送给客户：

response = HttpResponse( # Put callback name before the actual JSON
               callback + "(" + simplejson.dumps(response_dict) + ");", 
               mimetype='application/javascript')

这应该可行。

【讨论】：

最后修改时间：2012 年 7 月 12 日星期四 07:30:54 GMT 到期时间：2012 年 7 月 12 日星期四 07:30:54 GMT =0 "sColumns": "id,name,description,image_path,sort_order,parent,", "iTotalRecords": 12, "aaData": ... 是来自服务器的响应。

啊，你在这里看到：... "sColumns": ... no padding 在服务器响应数据之前:( 如果是你的服务器，那么你应该修改服务器端代码以支持填充。如果不是你的，试试 CORS，或者让他们添加 JSONP 支持，或者使用一些服务器端查询解决方案。See my answer about the later。