如何将 form/input/text 添加到 fetch() 请求的末尾？

Question

我正在构建一个随机的 DogAPI 图像生成器，您可以在其中将 1-50 的数字放入表单文本框中，然后点击发送，它 returns 您输入到（链接）图像中的数字将打印到控制台。我可以手动将数字放在提取的末尾，并将该数字打印到控制台，但我无法连接您在表单中输入的数字以将其放在提取请求的末尾。

我试过使用模板文字。如果您在提取结束时手动键入 ${5}，它会向控制台打印 5 张图像。伟大的！但是......我如何使用模板文字将我放入表单的内容连接到提取的末尾。 ${text} 显然不行！还是我做错了？感谢大家的帮助！

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How Many?</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <h1>How Many Dog Pics Do You Want?</h1>

        <form>
          <input type="text" placeholder="1-50?">
          <input type ="submit" value="Send">
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

JS:

'use strict';

function getDogImage() {
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => console.log(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    getDogImage();
  });
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});

Answer 1

您需要从输入中获取值（使用 .val()），并将其传递给 getDogImage(text)（参见代码中的注释）：

function getDogImage(text) { // add the text parameter
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => console.log(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    var text = $('.number').val() || 3; // get the text from the input or use 3
    getDogImage(text); // pass to getDogImage 
  });
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h1>How Many Dog Pics Do You Want?</h1>

  <form>
    <input class="number" type="text" placeholder="1-50?">
    <input type="submit" value="Send">
  </form>
</div>

如何将 form/input/text 添加到 fetch() 请求的末尾？

How to add a form/input/text to end of fetch() request?

html

javascript

forms

fetch

template-literals