Jquery ajax响应说“意外的令牌'：'”（使用jsonp作为数据类型）[重复]

Posted 2023-03-03

【中文标题】Jquery ajax响应说“意外的令牌\'：\'”（使用jsonp作为数据类型）[重复]

【英文标题】：Jquery ajax response says "Unexpected token ':'" (using jsonp as datatype) [duplicate]Jquery ajax响应说“意外的令牌'：'”（使用jsonp作为数据类型）[重复]

【发布时间】：2018-07-16 07:11:43

【问题描述】：

我有一个用PythonFlask 编写的演示网络服务器，我正在使用jsonp 通过jquery 对该服务器进行ajax 调用。 url 返回 json 作为响应，但脚本无法将其解析为 json。 错误提示 Unexpected token ":". 下面是 webserver 和 ajax 调用的代码，我还注释了出现错误的行。

from flask import Flask, jsonify, render_template
    app = Flask(__name__)


@app.route("/")
def index():
    html = (
        """<button type="button" id="button_1">Click Me !</button>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('#button_1').click(function() 
                var url = 'http://127.0.0.1:5000/url';
                alert(url);
                $.ajax(
                     url: url,
                     type: 'GET',
                     dataType: 'jsonp',
                     jsonpCallback: 'processJSONPResponse',
                     contentType: "application/json; charset=utf-8",
                     complete: function(data, status, jqXHR) 
                         console.log(data);
                     ,
                     error: function(xhr, ajaxOptions, thrownError) 
                         console.log(xhr.responseText);
                     
                );
            );
        </script>"""
    )
    return html


@app.route("/url")
def get_urls():
    response = 
        "urls":  # for the ajax call, I get an error as Unexpected token ":".
            "url1": "/api/repos/url1", 
            "url2": "/api/repos/url2", 
            "url3": "/api/repos/url3"
        
    
    return jsonify(response)


if __name__ == "__main__":
    app.run(debug=True)

我对 javascript (jquery) 很陌生，无法找出问题所在。任何帮助将不胜感激。

【问题讨论】：

该 ajax 调用得到的响应是什么？

【参考方案1】：

您确定需要 JSONP，而不仅仅是 JSON？

当您不允许使用 XHR（由于同源策略，例如当您向其他域名发出请求并且它不提供 CORS 标头时）时，JSONP 用于加载 JSON 数据，并提供基于注入的解决方法<script> 标签。

如果您只需要 JSON，请将您的 dataType: 'jsonp' 更改为 dataType: 'json'

对于 JSONP，您的服务器应返回的不是 JSON 字符串，而是包含以 JSON 作为参数的函数调用的 JavaScript：

processJSONPResponse(
    "url1": "/api/repos/url1", 
    "url2": "/api/repos/url2", 
    "url3": "/api/repos/url3"
)

这个脚本将被 jQuery 作为<script> 标签插入，一旦插入，processJSONPResponse() 函数将与您的数据一起执行。由于您在发起 JSONP 请求时定义了回调名称 (jsonpCallback: 'processJSONPResponse')，因此 jQuery 将为您创建此回调函数，一旦评估了 <script>，将使用您的数据调用 complete 函数。