Question

我有一个用Python Flask编写的演示网络服务器，我正在使用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）很新，无法弄清楚问题。任何帮助将不胜感激。

Answer 1

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

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

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

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

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

此脚本将由jQuery作为<script>标记插入，一旦插入，processJSONPResponse()函数将与您的数据一起执行。由于您在启动JSONP请求（jsonpCallback: 'processJSONPResponse'）时定义了回调名称，因此jQuery将为您创建此回调函数，并且在评估<script>后，将使用您的数据调用complete函数。 / p>

Jquery ajax响应说“Unexpected token'：'”（使用jsonp作为数据类型）

1 个答案: