How to Integrate API in Html Page

Complete Code Below:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
    @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

    body {
        padding-top: 50px;
    }

    .box {
        border-radius: 3px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        padding: 10px 25px;
        text-align: right;
        display: block;
        margin-top: 60px;
    }

    .box-icon {
        background-color: #57a544;
        border-radius: 50%;
        display: table;
        height: 100px;
        margin: 0 auto;
        width: 100px;
        margin-top: -61px;
    }

    .box-icon span {
        color: #fff;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .info h4 {
        font-size: 26px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .info>p {
        color: #717171;
        font-size: 16px;
        padding-top: 10px;
        text-align: justify;
    }

    .info>a {
        background-color: #03a9f4;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        color: #fff;
        transition: all 0.5s ease 0s;
    }

    .info>a:hover {
        background-color: #0288d1;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
        color: #fff;
        transition: all 0.5s ease 0s;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="box">
                <div class="box-icon">
                    <span class="fa fa-4x">AMD</span>
                </div>
                <div class="info">
                    <h4 class="text-center"><button id="getdata" class="btn btn-primary"> Get Data </button></h4>
                    <p id="contentI"> </p>

                </div>
            </div>
        </div>


        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#getdata').click(function(e) {

            var Details = JSON.stringify({
                'id': 135
            });


            $.ajax({
                url: 'URL',
                headers: {
                    'Authorization': 'Header KEY',
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                dataType: 'json',
                data: Details,
                success: function(data) {


                    jQuery.each(data.result_arr, function(i, val) {
                      
                        $("#contentI").append(document.createTextNode(val.loan_id));
                        $("#contentI").append(document.createTextNode(val.user_name));
                        $("#contentI").append('<br>');
                    });

                }
            });



        });
    });
</script>

OutPut :