AJAX无法触发success回调，GET API请求异常求助

我来帮你分析下这个问题——你遇到的核心问题其实是JSONP格式的误用，结合你的代码和描述，咱们一步步拆解：

核心原因：JSONP与普通JSON的不兼容 #

你提到直接在Chrome浏览器访问API返回正常，说明接口返回的是纯JSON格式（比如[{"id":1,"name":"餐厅A"}]），但你的AJAX代码里设置了dataType: "jsonp"，这就产生了矛盾：

• JSONP的原理是通过动态创建<script>标签加载数据，要求后端返回的是包裹在回调函数里的JavaScript代码（比如jQuery123456([{"id":1,"name":"餐厅A"}])）；
• 如果后端返回纯JSON，浏览器会把它当成JS代码执行，自然会报错，jQuery也就触发了error回调，甚至连简化版的success也不会触发。

另外你代码1里的complete回调还有个小问题：你遍历的data其实是jqXHR对象，不是接口返回的实际数据，所以这样的遍历完全取不到餐厅信息，这也是你觉得弹出的data异常的原因。

解决方案 #

根据你的场景，有两种处理方式：

方式1：改用普通JSON请求（推荐，前提是后端支持CORS） #

如果你的后端可以配置跨域资源共享（CORS），那直接把dataType改成"json"即可：

jQuery(document).ready(function ($) {
 $.ajax({
 url: 'http://localhost:15840/totem/GetRestaurants',
 type: "GET",
 dataType: "json", // 替换成json
 crossDomain: true,
 success: function (data) {
 alert("hello success");
 // 正确处理返回的餐厅数据
 let restaurantHtml = '';
 // 注意用of遍历数组（如果data是数组的话）
 for (let restaurant of data) {
 // 这里可以用餐厅的实际字段替换，比如restaurant.name
 restaurantHtml += `<li class="gallery-image">
 <a href="3.html" class="thumb">
 <img src="img/restaurante-02.jpg" alt="${restaurant.name}" />
 <div class="gallery-text"><span>${restaurant.name || 'FOOD RESTAURANT'}</span></div>
 </a>
 </li>`;
 }
 document.getElementById('restaurants').innerHTML = restaurantHtml;
 },
 error: function (jqXHR, textStatus, errorThrown) {
 // 打印错误信息方便排查
 console.log('请求错误详情:', textStatus, errorThrown);
 alert("error");
 }
 });
});

同时需要后端在响应头中添加CORS配置，比如：

Access-Control-Allow-Origin: *  # 或者指定你的前端域名，比如http://localhost:8080
Access-Control-Allow-Methods: GET

方式2：让后端支持JSONP格式 #

如果后端无法配置CORS，那需要后端修改接口，支持接收callback参数，并把JSON数据包裹在回调函数中返回。比如前端请求时jQuery会自动添加callback=jQueryxxx参数，后端需要返回类似：

jQuery123456([{"id":1,"name":"餐厅A"}])

这种格式，你的现有代码才能正常触发success回调。

内容的提问来源于stack exchange，提问作者Lechucico