Невозможно получить данные из AJAX API, используя ссылку URL

Question

(я только начал изучать JavaScript и AJAX) в моем проекте мне нужно получать данные из AJAX API, используя URL-ссылку.Кнопка «Получить все» подключаемого модуля напрямую и работает без проблем, но если мне нужно найти какую-то конкретную (используйте форму поиска) переменную, не переданную в URL.

и я не получаю никаких сообщений об ошибках

Область навесного оборудования

   variable from <input type="text"/>
not transmitted in URL
----------

<button class="nav-link" id="getAllBtn">Get All</button>
<form">
  <input type="text" placeholder="Search" aria-label="Search" id="currencyid" />
  <button class="btn my-2 my-sm-0" id="searchBtn">Search</button>
</form>


$("#getAllBtn").on("click", function() {
    console.log("home btn clicked")
    $.ajax({
        url: `http://www.example.com/`,
        method: "GET",
        success: function(result) {
            clearAll();
            $("#cryptoCards").html(getCurrenciesCard(result))
        },
        error: function() {
            clearAll();
            $("#cryptoCards").html("<h5>No Data!</h5>")
        }
    })
});

$("#searchBtn").on("click", function() {
    const currencyid = $("#currencyid").val();
    console.log("input: ", currencyid);
    $.ajax({
        url: `http://www.example.com/${currencyid}`,
        method: "GET",
        success: function(result) {
            clearAll();
            $("#cryptoCards").html(oneCurrencyCard(result))
        },
        error: function() {
            clearAll();
            $("#cryptoCards").html("<h5>No Data!</h5>")
        }
    })
});

Answer 1

вы не установили данные на ajax api.поэтому AJAX не может распознать ваши данные.Кроме того, ваш URL-адрес запроса: http://www.example.com/${currencyid}, поэтому ваш запрос будет: http://www.example.com/5, и ваш сервер будет искать его как url, функцию / метод что-то еще.Вот несколько способов использовать метод get:

• установить URL следующим образом: http://www.example.com? Id = $ {currencyid}
• установить данные в ajax apiнапример: data: {'id': currencyid}

Один из этих способов должен работать.

Answer 2

Тип

A <button> по умолчанию равен submit - поэтому вы отправляете форму, поэтому ни одно из ваших действий click не будет выполнено

Самое простое решение - заставить кнопку НЕ отправлять форму

<form>
  <input type="text" placeholder="Search" aria-label="Search" id="currencyid" />
  <button type="button" class="btn my-2 my-sm-0" id="searchBtn">Search</button>
</form>

или другое решение - предотвратить поведение по умолчанию

$("#searchBtn").on("click", function(e) {
    e.preventDefault();
    const currencyid = $("#currencyid").val();