how to call and return data from API with AJAX?

Question

Im trying to call an API using ajax. The api is https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f

I cant make it work.I searched in internet but i cant find or understand a solution for my problem. Its easy probably, but please help me This is my code:

<!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>

Inside the success function, find out what resp is. Do console.log(resp); — TKoL
– TKoL, Commented Nov 19, 2019 at 15:01
well you need to cancel the form submission or the form is going to submit while you are making the Ajax call. — epascarello
– epascarello, Commented Nov 19, 2019 at 15:11

Srimoyee Sen · Accepted Answer · 2019-11-19 15:08:22Z

2

Change your code to the one below :

$(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;
    });
});

answered Nov 19, 2019 at 15:08

Srimoyee Sen

1911 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Srimoyee Sen Over a year ago

As I am not authorized to access the API ,I got a 401 in return. But the call is executing.

user12398352 Over a year ago

Thank you! And how to make the result to show up in the div that i made?

Srimoyee Sen Over a year ago

You can add it in the success callback - $('#text).value = resp

Razvan Zamfir · Accepted Answer · 2019-11-19 15:32:42Z

You forgot an essential thing that is preventing you from testing and developing your script: preventing form submit. Do it with e.preventDefault();:

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

  $('#search-form').submit(function(e) {
    e.preventDefault();
    var artist = $('#inputText').val();

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

<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>

n1md7 · Accepted Answer · 2019-11-19 15:09:57Z

0

Your token is not valid it gives an unauthorised error.

Once you get the valid one it will work.

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

		$('form').submit(function(event){
                        event.preventDefault();
			var artist=$('#inputText').val();

			$.ajax({
				url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api,
				success:function(resp){
					alert(resp);
				},
				error:function(e){
					$('#text').text(e.statusText);
				}
			})
		})
	})

<!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>

answered Nov 19, 2019 at 15:09

n1md7

3,5292 gold badges19 silver badges37 bronze badges

2 Comments

user12398352 Over a year ago

Thank you! How to take the valid one? Sorry for the stupid questions.Its very new to me

n1md7 Over a year ago

Go to docs.rapidapi.com/docs/keys to learn how to get your API application key. Not sure is it free or you have to pay for testing. Probably you know that better.

Collectives™ on Stack Overflow

how to call and return data from API with AJAX?

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related