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內部觸發它。