JavaScript:
const URL = "www.thecocktaildb.com/api/json/v1/1/search.php?s="; const $strDrink = $('#strDrink'); const $strInstructions = $('strInstructions'); const $form = $('form'); const $input = $(`input[type="text"]`); $form.on('submit', drinksData) function drinksData(event){ event.preventDefault() const userInput = $input.val(); $.ajax(URL + userInput).then(function(data){ console.log("Let's find your cocktail!") console.log(data.drinks); $strDrink.text(data.strDrink) $strInstructions.text(data.strInstructions) $('main').append(`<img src="${data.strDrinkThumb}"/>`) }, function(error){ console.log('something is wrong') console.log(error) }) } $.ajax(URL).then(function(data){ console.log("Let's find your cocktail!"); console.log(data); }, function(error){ console.log('something is wrong') console.log(error) });HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script defer src="./js/script.js"></script> <link defer href="./css/style.css" rel="stylesheet"> <title>Cocktail Application</title> </head> <body> <h1>Alcoholic Beverage</h1> <main> <h3>Drink Name</h3> <p id="strDrink"></p> <p>Instructions</p> <p id="strInstructions"></p> </main> <form> <input type="text" placeholder="Drink Name"/> <input type="submit" value="Get Drink info"/> </form> </body> </html> El error dice: jquery-3.2.1.min.js:4
OBTENGA http://127.0.0.1:5500/www.thecocktaildb.com/api/json/v1/1/search.php?s= 404 (No encontrado)
Ayuda por favor :) Actualmente estoy tratando de usar la API de base de datos de cóctel para crear un sitio web de proyecto. Después de escribir HTML y javascript, me encontré con un problema GET que no sé cómo resolver.