how do i return the json object of my ajax GET request to an API in Asp.net MVC

Ok hi. I'm having a lot of problems with a project im building. I want to use Ajax to make a request to the Google.Books api so I can make book searches from my website. Its a Asp.net MVC project. I'm using Ajax on one of the pages.

The documentation says just send a GET request to the url. I wrote the ajax request and I seem to get an 200 ok response but im not getting the json object.

Also i want to put the info from the json response to show the title of the book and the author. Possibly a dropdown in html or a select div in html.

$(document).ready(function () {

$('getBookList').submit(function () {
    var key = "AIzaSyAAD3qgVCx8MeoD6aD-CzTasKijPE-Ny3Y";

    $.ajax({
        type: "GET",
        url: "https://www.googleapis.com/books/v1/volumes?q=search+terms&" + key,
        dataType: 'jsonp',
        data: { volumeInfo: title, volumeInfo: authors },
        success: function (data) {

            $('#volumeInfo:title').dropdown("show")(data)
            $('#volumeInfo:authors').dropdown("show")(data)
            $('#q').dropdown("show")(data)

                .fail(function (xhr, status, errorThrown) {
                    alert("Sorry, there was a problem!");
                    console.log("Error: " + errorThrown);
                    console.log("Status: " + status);
                    console.dir(xhr);

                });

        }
    });
});

});

Firstly, let's refer to the Google.Books API, we could see that if we want to search for author and title of a book, we have intitle and inauthor property. And the query request shall be a GET request like below which title contains "Flowers" and author name contains "Daniel".

https://www.googleapis.com/books/v1/volumes?q=intitle:Flowers+inauthor:Daniel&{key}

Since OP wants to do a query when the page is loading and have a search button for searching manually. I have a sampe like below.

<div>
    <span>
        <laber>title</laber>
        <input type="text" id="title" />
    </span>
    <span>
        <laber>authors</laber>
        <input type="text" id="authors" />
    </span>
    <button id="getBookList">search</button>
</div>
    
<div>
    <label>result for authors</label>
    <select id="mySelect">
        <option value="">Select an option</option>
    </select>
</div>

$(document).ready(function () {
    $('#getBookList').click();
});

$('#getBookList').click(function () {
    var key = "your key";
    var title = $('#title').val();
    var authors = $('#authors').val();
    var queryString = "q=intitle:" + title + "+inauthor:" + authors;
    $.ajax({
        type: "GET",
        url: "https://www.googleapis.com/books/v1/volumes?" + queryString +"&" + key,
        success: function (data) {
            console.info(data);
            var select = $('#mySelect');
            select.empty();
            $.each(data.items, function (index, item) {
                var temp = item.volumeInfo.authors.join(', ');
                select.append($('<option>', {
                    value: item.id,  // seems to be the book id
                    text: temp
                }));
            });
        }
    });
});