Question

我有一个GET API，可为我提供以下结果：

以下代码尝试获取此JSON信息：

<script>
   jQuery(document).ready(function ($)
   {       
      $.ajax({
         url: 'http://localhost:15840' + '/totem/GetRestaurants',
         type: "GET",
         dataType: "jsonp",
         crossDomain: true,
         complete: function (data)
         { 
            alert (data)
            for (var restaurant in data)
            {
               document.getElementById('restaurants').innerHTML = '<li class="gallery-image" > <a href="3.html" class="thumb"><img src="img/restaurante-02.jpg" alt="" /><div class="gallery-text"><span>FOOD RESTAURANT</span></div></a></li >'
             }   
          },
          error: function () {
             alert("error");
          }
       });
    });
</script>

总是执行错误方法，并且完整的警报仅显示以下信息：

但是如果我去Chrome检验器，响应看起来不错：

为什么会这样？

编辑：

使用以下代码，什么都不会发生：

<script>
    jQuery(document).ready(function ($)
    {       
        $.ajax({
            url: 'http://localhost:15840' + '/totem/GetRestaurants',
            type: "GET",
            dataType: "jsonp",
            crossDomain: true,
            success: function (data)
            {
                alert ("hello success")
            }
        });
    });
</script>

Answer 1

您说：

dataType: "jsonp",

…但是响应的屏幕快照显示，它是JSON而不是JSONP。

您需要：

将dataType设置为"json"
更改服务器以使用JSONP进行响应（有关更多信息，请参见What is JSONP, and why was it created?）。

请注意，JSONP是解决Same Origin Policy的肮脏而危险的技术，我们现在拥有CORS（这是一种标准化且灵活的方法，可以选择性地禁用不具有JSONP缺点的Same Origin Policy）。所以不要选择选项2。

您可能已尝试使用dataType: "jsonp"，因为出现了类似以下错误：

XMLHttpRequest无法加载XXX No'Access-Control-Allow-Origin'标头

发生此错误是因为您违反了“同一来源策略”。 JSONP是解决它的一种方法，而CORS是一种更好的方法。这两种方式都需要更改服务器才能使它们工作。

有关更多信息，请参见this question。

Answer 2

在发送jsonp请求时，您需要更改返回数据的方式。您需要将JSON对象包装在$ _GET ['callback']中。如果您的后端在php中，则可以尝试以下代码

 $response['data'] = array('sdu');
 $response = json_encode($response);
 echo htmlspecialchars($_GET['callback']) . '(' . $response . ')';
 exit;

AJAX从未成功

2 个答案: