Ajax 调用没有返回任何内容

Question

I'm pretty much a complete beginner at javascript and jQuery, so please bear with me.

I have a Spark-API running, and a web front-end that uses it through ajax calls.

I'm trying to call this function

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

The method is placed outside of:

$(document).ready(function() {

The reason it's outside is that I get an error upon calling it saying it's "undefined" if it's within $(document).ready.

The Spark-method is supposed to return a String ( and it does when you try it directly through the browser).

The way I'm calling the getSpotifyURL-method is through a html button's "onclick". Like this:

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

The problem: The .done-block does nothing in my code. Nothing is printed to console.

What I've tried:

• Using "success" within the ajax part instead of .done
• Placing the function with $(document).ready(function() { ... }

I understand that you might need more information to be able to help me, but I'm not sure what else information to provide right now. So if there's something you need to know, just ask.

Ideas?

SOLVED!

I'm a dumb person and forgot to remove dataType: "json", as the Spark-server in this instance returned a String, not a json object. Anyway, thanks for your input everybody. Much appreciated.

Answer 1

I think the problem is when you bind your function onclick. There is a syntax error, as you can see on the browser console

 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>"

I guess data is a variable, so you should call it without brackets

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

Answer 2

The reason you are getting undefined method when you are placing the function inside the $(document).ready(function() { ... }); call is because you are using the onclick attribute to call the function. $(document).ready(...) is not in global context as to where you onclick attribute is, and would therefore not recognize it from within the document.ready resulting in your undefined method error.

When sending your Ajax request, you also need to specify a type of request ( GET or POST ) that you are making. I would also suggest restructuring your ajax call to look more like @Moe's answer.

If you want to get it inside the DOM, consider doing the following:

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);
            }
        });
    });
});

I gave the link a click handler and placed it inside the $(document).ready , and by removing the onclick attribute from earlier, it can now be triggered from inside $(document).ready .