Dev Faq
0
votes

Comment appeler et retourner des données d'API avec Ajax?

im essayant d'appeler une API en utilisant Ajax. L'API est https://rapidapi.com/brianiswu / API / GENIUS? ENDPOINT = APIENDPOINT_D2F41EA4-7D5C-4B2D-726A-807BFFA7E78F

Je ne peux pas le faire travailler. Je ne peux pas trouver ou comprendre une solution pour mon problème. C'est facile probablement, mais s'il vous plaît aidez-moi Ceci est mon code: p>

p> 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>MusicApp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>
	<form>
		<input type="text" id="inputText">
		<input type="submit" name="submit" id="submitBtn">
	</form>

	<div id="text"></div>
</body>

<script>
	
	$(document).ready(function(){
		var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";

		$('#submit').click(function(){
			artist=$('#inputText').val();

			$.ajax({
				method:"GET",
				url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api,
				success:function(resp){
					alert("successfully");
				},
				error:function(){
					alert("Something went TEREBLY WRONG!!!! \nYOU BROKE IT!");
				}
			})
		})
	})
</script>
</html>

3 commentaires

Dans la fonction de réussite, découvrez ce que respères est. Faire console.log (resp);

L'API que vous avez liée a des en-têtes d'autorisation requis.

Eh bien, vous devez annuler la soumission du formulaire ou le formulaire va soumettre pendant que vous effectuez l'appel Ajax.

3 Réponses :

2
votes

Changez votre code sur celui ci-dessous: 

$(document).ready(function(){
    var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";

    $('#submitBtn').click(function(){
        artist=$('#inputText').val();

        $.ajax({
            method:"GET",
            url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api,
            success:function(resp){
                alert("successfully");
            },
            error:function(){
                alert("Something went TEREBLY WRONG!!!! \nYOU BROKE IT!");
            }
        });
        return false;
    });
});

3 commentaires

Comme je ne suis pas autorisé à accéder à l'API, j'ai reçu un 401 en retour. Mais l'appel est exécutant.

Merci! Et comment faire le résultat de se présenter dans la DIV que j'ai faite?

Vous pouvez l'ajouter dans le rappel du succès - $ ('# texte) .Value = resp.

0
votes

Votre jeton n'est pas valide, il donne une erreur non autorisée.

Une fois que vous avez obtenu le valide, il fonctionnera. p>

p> 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>MusicApp</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
</head>
<body>
	<form>
		<input type="text" id="inputText">
		<input type="submit" name="submit" id="submitBtn">
	</form>
	<div id="text"></div>
</body>

</html>

2 commentaires

Merci! Comment prendre le valide? Désolé pour les questions stupides. C'est très nouveau pour moi

Allez à docs.rapidapi.com/docs/keys pour apprendre à obtenir votre clé d'application API . Je ne sais pas que c'est gratuit ou que vous devez payer pour tester. Probablement vous savez cela mieux.

1
votes

Vous avez oublié une chose essentielle qui vous empêche de tester et de développer votre script: prévenir la soumission de formulaire. Faites-le avec E.PreventDefault (); code>:

p> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<form id="search-form" class="form-inline">
  <input type="text" id="inputText" class="form-control">
  <input type="submit" name="submit" id="submitBtn" class="btn btn-default">
</form>

<div id="text"></div>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO