Передача переменной и значения в API

Question

Как передать переменную и значение current_breed в API? Я должен сделать запрос GET на сайт породы собак. "this.val" должен содержать текущую выбранную породу. И мне нужно убедиться, что запрос AJAX отображается на вкладке сети каждый раз, когда я выбираю породу. Вот часть кода:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        console.log("ready!");
        var imageHolder = document.getElementById("imageHolder");

        var generateButton = document.getElementById("generateButton");

        var breedsElement = document.getElementById("breeds");

        var doggieList = document.getElementById("doggieList");

        doggieList.addEventListener('change', function() {
            var current_breed = $(this).val();

            console.log(current_breed);
        });

        $.get("https://dog.ceo/api/breeds/list/all", function (data) {

            console.log("Checking All Breeds Endpoint");
            console.log(data);

            var breeds = data.message;

            

Answer 1

Прочтите здесь Конечные точки API, чтобы ознакомиться с различными списками, которые вы можете создать:

https://github.com/ElliottLandsborough/dog-ceo-api

Все они возвращают JSON и в следующих формат:

{
  "message":""
  "status":""
}

Если вы выполняете поиск или ищете определенные элементы, вы можете проверить наличие "success" или "error" в статусе.

Таким образом, в запросе GET вы потребуется вызвать элемент message объекта ответа.

Это может быть больше, чем вы ищете, но это также хороший пример.

$(function() {
  var imageHolder = $("#imageHolder"),
    generateButton = $("#generateButton"),
    doggieList = $("#doggieList");

  function setBreedImg(breed) {
    console.log("Lookup Breed:", breed);
    $.getJSON("https://dog.ceo/api/breed/" + breed + "/images/random", function(j) {
      imageHolder.html("");
      console.log("Set Image", j.message);
      $("<img>", {
        src: j.message
      }).hide().appendTo(imageHolder).fadeIn();
    });
  }

  doggieList.autocomplete({
    source: function(req, resp) {
      $.getJSON("https://dog.ceo/api/breeds/list/all", function(j) {
        resp($.ui.autocomplete.filter(Object.keys(j.message), req.term));
      });
    },
    select: function(e, ui) {
      console.log("Selected", ui.item.label);
      setBreedImg(ui.item.label);
      return false;
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <h3>Breeds list</h3>
  <div>
    <div class="code-wrapper breeds">
      <span class="code">https://dog.ceo/api/breed/<input type="text" id="doggieList" /></span>
    </div>
    <div id="imageHolder"></div>
  </div>
</div>

В этом примере используется библиотека jQuery UI: https://jqueryui.com/autocomplete/