TechQA.

Linked Questions

Popular Questions

How to use API GET request on HTML page with javascript / ajax to retrieve data?

Asked by At

I am following this documentation: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/DeterminingBaseURL.html

Using basic authentication.

I have already determined the base URL, so I am using the base URL directly in the code.

I am not 100% if i need authorization code or not (not sure, how i will get it) so i am not using this in my code: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/Authentication_Basic.html

I am trying to get a list of emails by a simple GET request like here: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/api-application-2.0-emails.html

So far, I have created this code but I do not see any success? why? is there any issue with my code? can anyone help please?

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var username = "MYUSERNAME";
            var password = "MYPASSWORD";

            function make_base_auth(user, password) {
                var tok = user + ':' + password;
                var hash = btoa(tok);
                return "Basic " + hash;
            }

            var url1 = 'https://BASEURL.com/api/REST/2.0/assets/emails';
            $.ajax
                ({
                    type: "GET",
                    url: url1,
                    dataType: 'json',
                    cache: false,
                    //contentType: 'application/x-www-form-urlencoded',
                    headers: {
                        'Accept': 'text/html',
                        'Content-Type': 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Access-Control-Allow-Origin': '* ',
                        'Access-Control - Allow - Headers': 'Origin, X-Requested - With, Content-Type, Accept'
                    },
                    //async: false,
                    //data: '{}',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', make_base_auth(username, password));
                    },
                    success: function (result) {'
                        console.log(result);
                        alert('success - this is working');
                    }
                    //success: function (jsondata) {
                    //    console.log(status);
                    //}
                });

            alert("done");
        });

    </script>
</head>
<body>





</body>
</html>

I am getting the alert "done" but nothing else is happening. Please help!

javascript html ajax api get
Original Q&A

1 Answers

1
Chiến Nghê On

Please check this codepen (I made it with your code) and replace it with your real requesting url.

When you click on the button, you will see the url is requested successfully as following image

enter image description here

Make sure you use dataType: 'jsonp' for cross-site requesting.

Moreover, in your code, there is a redudant single quote at the end of line success: function (result) {', please remove it.

For the alert("done"), it is always executed because it's not part of async process. it's executed right after the ajax command triggered.

Related Questions