如何获得我的代码，以使用户提交品种的狗并返回特定品种的图片

Question

我已经自学了3个月的代码，如果我的问题很难理解，请原谅我。 我在我的应用程序中添加了一个搜索栏（我认为搜索栏的html代码是正确的，但希望有人看过它，我会很感激），并且我试图找出如何使我的应用程序加载单个随机图像的方法根据使用者的输入来指定特定品种，并在应用程式中说明找到品种时的喜好案例，以及没有找到时的不满意案例。

这是直接链接到它的链接，但代码也可以在本文中查找。我需要添加到我的js中吗？

`

 'use strict'; function getDogImage() { fetch('https://dog.ceo/api/breed/hound/images/random') .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); 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; } .hidden { display: none; }

 <!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>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </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>

` https://repl.it/@Mike65/get-fetch-dog-api-example-DOM-3

Answer 1

因此，您需要做的是

从#breed元素中读取输入的品种
传递给getDogImage
接受getDogImage一个参数...让它称为breed
使用此输入的品种作为URL路径中breed之后的值...例如.../api/breed/dingo/images

请参阅以下经过测试和工作的代码

 'use strict'; function getDogImage(breed) { fetch(`https://dog.ceo/api/breed/${breed}/images/random`) .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); getDogImage($('#breed').val()); }); } $(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; } .hidden { display: none; }

 <!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>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </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>

如何获得我的代码，以使用户提交品种的狗并返回特定品种的图片

问题描述

1 个解决方案

解决方案1
0 2019-09-16 02:03:51

如何获得我的代码，以使用户提交品种的狗并返回特定品种的图片

问题描述

1 个解决方案

解决方案1 0 2019-09-16 02:03:51

解决方案1
0 2019-09-16 02:03:51