Ajax 调用没有返回任何内容

Question

我几乎是 javascript 和 jQuery 的完全初学者，所以请耐心等待。

我有一个 Spark-API 正在运行，以及一个通过 ajax 调用使用它的 Web 前端。

我正在尝试调用此函数

function getSpotifyURL(ms, name) {
        $.ajax({
            url: "http://localhost:8081/playlist?ms=" + ms + "&name=" + name,
            dataType: "json",
        })
        .done(function( data ) {
            console.log(data);
        })
    }

该方法放置在：

$(document).ready(function() {

它在外面的原因是，如果它在 $(document).ready 内，我在调用它时会出错，说它是“未定义的”。

Spark 方法应该返回一个字符串（当您直接通过浏览器尝试它时它会返回）。

我调用 getSpotifyURL 方法的方式是通过 html 按钮的“onclick”。 像这样：

<a href='#' onclick='getSpotifyURL(" + data[i].duration + ",\"" + data[i].destination + "\")'>Create Spotify playlist for this trip</a>"

问题： .done-block 在我的代码中什么都不做。 没有任何内容打印到控制台。

我试过的：

• 在 ajax 部分中使用“success”而不是 .done
• 用 $(document).ready(function() { ... } 放置函数

我知道您可能需要更多信息才能为我提供帮助，但我不确定现在还需要提供哪些信息。 所以如果有什么你需要知道的，尽管问。

想法？

解决了！

我是一个愚蠢的人，忘记删除 dataType: "json"，因为这个实例中的 Spark-server 返回了一个字符串，而不是一个 json 对象。 不管怎样，谢谢大家的意见。 非常感激。

Answer 1

我认为问题是当你绑定你的函数 onclick 时。 存在语法错误，正如您在浏览器控制台上看到的

 function getSpotifyURL(ms, name) { console.log("http://localhost:8081/playlist?ms=" + ms + "&name=" + name); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='#' onclick='getSpotifyURL(" + data[i].duration + ",\\"" + data[i].destination + "\\")'>Create Spotify playlist for this trip</a>"

我猜data是一个变量，所以你应该不带括号调用它

<a href='#' onclick='getSpotifyURL(data[i].duration, data[i].destination)'>Create Spotify playlist for this trip</a>

Answer 2

当您将函数放入$(document).ready(function() { ... });时，您得到undefined method的原因$(document).ready(function() { ... }); call 是因为您正在使用onclick属性来调用该函数。 $(document).ready(...)不在全局上下文中，因为您的onclick属性所在的位置，因此不会从 document.ready 中识别它，从而导致您undefined method错误。

在发送 Ajax 请求时，您还需要指定您正在发出的请求类型（ GET或POST ）。 我还建议重组您的 ajax 调用，使其看起来更像@Moe 的回答。

如果您想将其放入 DOM，请考虑执行以下操作：

HTML

<!-- I gave the link a class name and removed the onclick= attribute -->
<a href="#" class="create-spotify-playlist">Create Spotify playlist for this trip</a>

JavaScript

$(document).ready(function() {

    // I gave the <a> link a click handler
    $(".create-spotify-playist").on("click", function(e) {
        e.preventDefault();  // prevents link from requesting

        var ms = ??   //I'm not sure where you're getting your parameters from,
        var name = ?? //so you will probably have to figure out how to get those in here yourself

        $.ajax({
            type: "GET",
            url: "http://localhost:8081/playlist",
            data: { ms: ms, name: name },
            success: function(data) {
                console.log("Success: " + data);
            },
            error: function(data) {
                console.log("Error: " + data);
            }
        });
    });
});

我为链接提供了一个点击处理程序并将其放置在$(document).ready ，通过删除之前的onclick属性，现在可以从$(document).ready内部触发它。