如何将表单/输入/文本添加到 fetch() 请求的末尾？答案

【问题标题】：How to add a form/input/text to end of fetch() request?如何将表单/输入/文本添加到 fetch() 请求的末尾？
【发布时间】：2021-07-23 02:33:39
【问题描述】：

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

我尝试过使用模板文字。如果您在 fetch 结束时手动输入 ${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();
});

【问题讨论】：

标签： javascript html forms fetch template-literals

【解决方案1】：

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

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>

【讨论】：

谢谢！这行得通！在此说明：我将如何完成相同的操作，但默认值为 3？ “该应用程序应具有一个带有必需输入的表单，其中用户指示要检索的图像数量，并且输入应默认为 3。”
不客气。您可以将value="3" 添加到输入的html，或者您可以使用短路或（||）添加默认值。我已经用默认值更新了示例。
还有一个问题：现在我已经启动并运行了它，它只会显示 1 个 img。如，我输入 1，它显示 1 张图片。但如果我输入 2 个或更多，对象会显示更多链接，但不会显示照片。我在提交时将其添加到 JS 以显示照片：function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( ` ) //显示结果部分 $('.results')。 removeClass('隐藏'); }`