如何获得我的代码，以使用户提交品种的狗并返回特定品种的图片
[英]How would I get my code to let the user submit a breed of dog and return pictures of the specific breed
问题描述
i've been teaching myself to code for 3 months so forgive me if my question is hard to understand. 
我已经自学了3个月的代码，如果我的问题很难理解，请原谅我。 I added a search bar in my app (I think my html code for the search bar is correct but I would appreciated it someone took a look at it) and I was trying to find out how I can make my app load a single random image for a specific breed, based on a user input, and also make the app account for the happy case when the breed is found, as well as the unhappy case when it is not. 我在我的应用程序中添加了一个搜索栏（我认为搜索栏的html代码是正确的，但希望有人看过它，我会很感激），并且我试图找出如何使我的应用程序加载单个随机图像的方法根据使用者的输入来指定特定品种，并在应用程式中说明找到品种时的喜好案例，以及没有找到时的不满意案例。
heres a link straight to it but the code can also be ran through this post.What do I need to add to my js? 这是直接链接到它的链接，但代码也可以在本文中查找。我需要添加到我的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 ` https://repl.it/@Mike65/get-fetch-dog-api-example-DOM-3
1 个解决方案
解决方案1
0 2019-09-16 02:03:51
So, what you need to do is 因此，您需要做的是
- read the entered breed from #breed element 从#breed元素中读取输入的品种
- pass that to
getDogImage传递给getDogImage - accept an argument in
getDogImage...lets call itbreed接受getDogImage一个参数...让它称为breed - use this entered breed as the value after
breedin the URL path ... eg.../api/breed/dingo/images使用此输入的品种作为URL路径中breed之后的值...例如.../api/breed/dingo/images
See following, tested and working, code 请参阅以下经过测试和工作的代码
'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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.