Untitled

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <title>JSON WebServer</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="jquery-3.4.1.js"></script>
        <script>

            var mensagens;

            function refresh() {
                $.ajax({url: "http://localhost:8080/mavenproject3/resources/model.mensagens", async: false, success: function (result) {
                        mensagens = result;
                    }});
            }
            ;

            refresh();


            var myapp = angular.module("myapp", []);
            myapp.controller("myapp-controller", function ($scope) {
                $scope.mensagens = mensagens;
            });


            function Sendmsg() {
                alert("1");
                var myObject = new Object();
                myObject.msg = $("#msg").val;
                myObject.nome = $("#nome").val;
                $("#nome").val('');
                $("#msg").val('');
                alert("2");

                // para aqui.


                $.post("http://localhost:8080/mavenproject3/resources/model.mensagens/", myObject, json);

                alert("3");
                document.reload();


            }
            ;


        </script>
    </head>
    <body ng-controller="myapp-controller">
        <div id="main">
            <div><label>Nome:</label><input type="text" id="nome"/></div>
            <div><label>Mensagem:</label><input type="text" id="msg"/></div>
            <input type="button" value="Enviar" name="sendmsg" onclick="Sendmsg()" />
            <button onclick="refresh()">atualizar</button>
        </div>
        <div>
            <ol type="1">
                <li ng-repeat="mensagem in mensagens track by $index">
                    <div>{{mensagem.nome}}: {{mensagem.msg}}</div>
                </li>
            </ol>
        </div>
    </body>
</html>