Как пройти через поле ввода html в код javscript axios?

Question

Мне нужна простая / обычная HTML-форма с выпадающим полем ввода, называемым ТИПЫ. Затем мне нужен код аксиоса, полученный из кодового пера, чтобы «получить» значение ТИПОВ, которое выбрал пользователь. Я не понимаю, как поле ввода HTML-формы отправляется в код Axios?

Следующие шаги работают, но я не могу передать значение TYPES. БЛАГОДАРЯ

Я знаю, как сделать форму.

Я знаю php код. ((fyi. example.com/getimages.php?cat=TYPES, это работает, но мне нужно, чтобы 'types' были переданы в качестве значения))

Я плохо разбираюсь в axios или javascript.

***** HTML-код *****

input: <input type="text" name="TYPES"  id="TYPES">
<button onclick=“findimages()">Search</button>

***** AXIOS-код из кодовой ручки *****

(function($) {


.... <other code>

 const fetchImages = (count = 10) => {

   axios.
   get(`https://example.com/getimages.php?cat=TYPES`).
   then(res => {
     setImages([...images, ...res.data]);
     setIsLoaded(true);

     console.log(images);
   });
 };

.... <other code>

};

ReactDOM.render(React.createElement(Collage, null), 
document.getElementById("root"));

} )( jQuery );

Если кнопка поиска в html-форме может «вызвать / отправить / передать» код аксиоса И передать значение ТИПОВ ... все будет отлично!

Answer 1

Похоже, у вас есть проблемы с форматированием / кодированием символов в вашем примере. <button onclick=“findimages()"> использует неверные кавычки (") и также не вызывает fetchImages(). Также вы упомянули "dropdown input", поэтому я не уверен, что вы имели в виду select dropdown, или просто имеете в виду нормальный input text box. Я добавил оба для примера.

Вы можете заменить переменную exampleURL на type_select вместо type_input, если хотите. Этот запрос axios просто попадет в пример JSON API и вернет {"response" : 200}, но вы должны увидеть переменную cat, переданную в URL запроса с TEST в качестве значения.

const fetchImages = (count = 10) => {

  let type_input = document.getElementById('types_input').value;
  let type_select = document.getElementById('types_select').value;

  // URL: 'https://example.com/getimages.php?cat=' + type_input;
  let exampleURL = 'https://api.myjson.com/bins/7yftn?cat=' + type_input;

  axios.
  get(exampleURL).
  then(res => {
    console.log(res);
    // setImages([...images, ...res.data]);
    // setIsLoaded(true);
    // console.log(images);
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<select name="types_select" id="types_select">
  <option value="">-Select Type-</option>
  <option value="Type 1">Type 1</option>
  <option value="Type 2">Type 2</option>
</select>
<br/>
<input type="text" name="types_input" id="types_input" value="TEST" />
<br/>
<button onclick="fetchImages()">Search</button>