Ajax call ничего не возвращает

Question

Я довольно много начинаю на javascript и jQuery, поэтому, пожалуйста, несите меня.

У меня есть Spark-API, и веб-интерфейс, который использует его через вызовы ajax.

Я пытаюсь вызвать эту функцию

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() { 

Причина это снаружи, что я получаю сообщение об ошибке при вызове его говорят, что это «не определено «если он находится в $ (документе) .ready.

Предполагается, что Spark-метод возвращает строку (, и она выполняет при попытке ее непосредственно через браузер).

Способ, которым я вызываю метод getSpotifyURL, состоит из кнопки «onclick» кнопки html. Как это:

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

Проблема: .done-блок ничего не делает в своем коде. На консоль ничего не печатается.

Что я пробовал:

• Использование "успех" в рамках АЯКС части вместо .done
• Размещение функции с $ (документ) .ready (функция() {.. .}

Я понимаю, что вам, возможно, потребуется больше информации, чтобы быть в состоянии помочь мне, но я не уверен, что еще информация для обеспечения прямо сейчас. Так что, если есть что-то вам нужно знать, просто спросите.

Идеи?

РЕШЕННЫЙ!

Я немой человек и забыл удалить dataType: «json», так как Spark-сервер в этом экземпляре возвратил String, а не объект 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

Причина вы получаете undefined method, когда вы размещаете функцию внутри вызова $(document).ready(function() { ... });, потому что вы используете атрибут onclick для вызова функции.$(document).ready(...) is не в глобальном контексте относительно того, где вы указываете атрибут onclick и поэтому не узнаете его изнутри документа. В результате ваша ошибка undefined method.

При отправке запроса Ajax вам также необходимо указать тип запроса (GET или POST), который вы делаете. Я также предложил бы реструктурировать ваш призыв ajax, чтобы больше походить на @ Moe's ответ.

Если вы хотите получить его внутри 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.