未捕获的 SyntaxError：意外的令牌：jQuery ajax [重复]答案

【问题标题】：Uncaught SyntaxError: Unexpected token : jQuery ajax [duplicate]未捕获的 SyntaxError：意外的令牌：jQuery ajax [重复]
【发布时间】：2017-08-16 23:26:24
【问题描述】：

我正在创建一个调用远程数据（json）的网页。为此，我使用了 jQuery.ajax，当我在同一个域中调用页面时，这很好。但是，如果我从另一个域（例如：localhost）调用它，浏览器会通过说来阻止

请求的资源上没有“Access-Control-Allow-Origin”标头

但如果我将 dataType: 'JSONP' 与 ajax 一起使用，则浏览器不会阻塞，但会收到此 以下错误，尽管它是一个有效的 json 对象：

Uncaught SyntaxError: Unexpected token :
at p (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at text script (jquery.min.js:4)
at Nb (jquery.min.js:4)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

这是我的 ajax 代码：

$(function () {
    $.ajax({
        url: "/GarmentTech/api/get_products.php",
        type: "GET",
        success: function (result) {
            $('.text').text('');
            console.log(result);
            console.log(result);
            for (var i = 0; i < result.products.length; i++) {
                var place = `
                    <tr>
                        <td>${result.products[i].name}</td>
                        <td>${result.products[i].description}</td>
                        <!--<td>${result.products[i].type}</td>-->
                        <td>${result.products[i].model_color}</td>
                        <td>${result.products[i].size}</td>
                        <!--<td>${result.products[i].manufacturer}</td>-->
                        <td>${result.products[i].purchase_rate}</td>
                        <td>${result.products[i].sales_rate}</td>
                        <td style="text-align:right;">
                            ${result.products[i].stock_count}
                            ${result.products[i].unit_type}
                        </td>
                    </tr>
                `;
                $('.product_view').append(place);
            }
        },
        dataType: 'JSONP' // <----
    }); 
});

而json是这样的：

{
"status": "ok", //<---- (chrome is saying problem is hare)
"count": 26,
"count_total": 26,
"pages": 1,
"products": [
    {
        "size": "16X18",
        "id": 41,
        "name": 86416,
        "cost_price": 1200,
        "sales_rate": 1300,
        "description": "",
        "remarks": "",
        "batch_no": "NA"
    }, {}...

【问题讨论】：

它可能是有效的 JSON，但它不是有效的 JSONP。
谢谢@JJJ，我找到了解决方案。问题解决了。刚刚添加了这一行<?php header('Access-Control-Allow-Origin: *'); ?>

标签： javascript jquery json ajax

【解决方案1】：

你不能只使用 JSONP，它必须得到服务器的支持。 JSONP 是一种 hack，服务器将您的 JSON 数据包装在 javascript 函数（回调）中。当 jQuery 收到它时，它会评估它并尝试运行该函数。如果您调用的服务器不进行包装，它将无法工作。因此令牌错误。

如果您可以控制服务器，则可以实现 JSONP 支持或为 AJAX 调用提供适当的跨域支持。这通常称为CORS（跨源资源共享）。

您可以通过修改访问策略使您的 CORS 设置更加宽松。有大量教程介绍了如何使用几乎任何 Web 服务器以及几乎任何语言执行此操作。

【讨论】：

【解决方案2】：

要使用 JSONP，您需要同时使用 JavaScript 和服务器端回调函数。 callback=? 值必须在客户端之外给出客户：

$.ajax({
        type:"GET",
        dataType:"jsonp",
        url:"example.php",
        data: "callback=?",
        success: function (result) {
            // do something
        }
    });

服务器：

function example()
{
  // do something and return as follows
  $value = json_encode($value);
  echo $_GET['callback'] . '(' . $value. ')';
}

【讨论】：