Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>
    <meta charset="UTF-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.2.min.js">
</script>


<script>
    function refresh() {
        $.get( "http://localhost:9090/test-mvn-app/users",
                function(data) {
                    var html = "";

                    for (var i = 0; i < data.length; i++) {
                        html += "<span>";
                        html += data[i].name;
                        html += "</span>";
                        html += "<br>";
                    }

                    $("#users").html(html);
                }
        );
    }

    function clearDiv() {
        $("#users").html("");
    }

    function addUser() {
        var userName = $("#userName").val();
        $.post("http://localhost:9090/test-mvn-app/addUser",
                {name : userName},
                function (data) {
                });
    }

    function refreshPosts() {
        $.get( "http://localhost:9090/test-mvn-app/posts",
                function(data) {
                    var html = "";

                    for (var i = 0; i < data.length; i++) {
                        html += "<span>";
                        html += data[i].text;
                        html += "</span>";
                        html += "<br>";
                    }

                    $("#users").html(html);
                }
        );
    }
</script>

<div id="users">

</div>


<div id="calculator">
    <div class="keys">
        <input type="button" onclick="refresh();" value="refresh"/>
        <input type="button" onclick="refreshPosts();" value="refreshPosts"/>
        <input type="button" onclick="clearDiv();" value="clear"/>
        <p><input id="calc_value" type="text" value=""></p>
    </div>
</div>

<hr>
<hr>
<hr>
<div>
    <p><input id="userName" type="text" value=""></p>
    <input type="button" onclick="addUser();" value="addUser"/>
</div>

</body>
</html>