ajaxAssignment.html

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

    </style>
</head>
<body>

<table id="studentDataTable" class="table-bordered">
    <thead>
    <tr class="success">
        <th>Name</th>
        <th>Title</th>
        <th>City</th>
    </tr>
    </thead>
    <tbody>


    </tbody>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function(){
        var ajaxConfigure= {
           "url": "http://localhost:9300/GetStudents",
            "method": "GET",
                "success": function(data){
            var students =  data.studentList;
            var dynamicHtml = '';
            for(var i = 0; i < students.length; i++){
                dynamicHtml += '<tr><td>' + students[i].studentName
                        +'</td><td>' + students[i].studentTitle + '</td><td>'
                        + students[i].studentCity + '</td></tr>';
                console.log(dynamicHtml);
            }

            $('#studentDataTable tbody').append(dynamicHtml);
        },
        "error": function(jqXHR,textStatus,error){
            alert('ajax call error');
        },
        "dataType": "json",
                "complete": function(){
            //alert('ajax call complete');
        }
    };

    $.ajax(ajaxConfigure); //making an ajax call


    }
        )
</script>
</body>
</html>