Witam,
Piszę do was z prośbą bardziej o wyjaśnienie, czy naprowadzenie, niż podanie odpowiedzi.
Napisałem formularz do rejestracji przy użyciu HTML, mam bazę danych w MySql, która ma zawierać rekordy z tymi użytkownikami. Baza danych działa sprawnie w połączeniu z moją aplikacją w java przy pomocy Hibernate (to znaczy, że zapisuję i odczytuję dane do/z bazy za pośrednictwem mojej aplikacji w java).
Chcę, żeby po wybraniu danych w formularzu HTML i wciśnięciu "submit" dane z formularzy zostały przekazane do mojej aplikacji w java, skąd powędrowały by do DB.
Gdzieś tutaj na forum, ktoś wspominał, że thymleaf jest raczej mało używany w ewentualnej pracy, więc zrezygnowałem z tego rozwiązania. Zainteresowałem się js, JQuery i w końcu Angularem aż trafiłem na metody GET i POST.
Nie za bardzo jednak rozumiem jak to powinno działać, gdzieś w międzyczasie trafiłem na Jsona, do którego koniec końców próbuje zapisać dane z formularza, po czym tego Jsona odczytać w java.
Gdzieś indziej znowu wyczytałem, że potrzebny jest serwer, żeby dane najpierw przekazać do serwera, potem odebrać się z serwera javą, więc zainteresowałem się Tomcatem. Koniec końców stoję w miejscu co jest mocno frustrujące.
Odnośnie użycia metody GET/POST przeczytałem wiele przykładów w internecie, jednak każdy z nich był pisany w nieco inny sposób, a bez ogólnego zrozumienia średnio mi to pomagało, w końcu postanowiłem skorzystać z przykładu Link, zapisać dane do Json i przekazać Jsona do javy. Niestety to w ogóle nie działa. Po wciśnięciu submita, dane nie sa nigdzie wysyłane z formularza (w narzędziu pod F12 w przeglądarce google chrome nie pokazuje żandych błędów). Bardzo proszę o pomoc, jak powinienem zabrać się za to co chcę osiągnąć, czym się zainteresować (może nawet jakiś konkretny link), ewentualne wytłumaczenie o co chodzi. Możliwe, że można było to zrobić 100x łatwiej, jednak sam projekt miał na celu poszerzenie moich horyzontów ;). Stąd Hibernate, js etc. Chciałem nauczyć się korzystać z nowych narzędzi, czy też chociaż ich liznąć, a teraz siedzę sfrustrowany. Poniżej zamieszczam mój kod HTML i Angularjs.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Stylesheet.css" type="text/css"/>
<meta charset="UTF-8">
<title>Register</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="RegisterPane">
<img class="RegPane" src="img/RegisterPane.png">
<img class="NameImput" src="img/input.png">
<input id="Name" class="Name" type="text" ng-model="Name" placeholder="Imie"><br>
<input id="Surname" class="Surname" type="text" ng-model="Surname" placeholder="Nazwisko"><br>
<img class="SurnameInput" src="img/input.png">
<SELECT class="Project" ng-model="Project" NAME="Project" style="width: 120px;">
<OPTION>Reklamacje
<OPTION>Infolinia
<OPTION>BO
</SELECT><br>
<img class="ProjectInput" src="img/input.png">
<select class="Group" ng-model="Group" name="Group" style="width: 120px;">
<option>Olsztyn</option>
<option>Gdańsk</option>
<option>Białystok</option>
</select><br>
<img class="GroupInput" src="img/input.png">
<input class="submit" ng-click="fetch()" type="submit">
</div>
<script src="Scripts.js"></script>
</body>
</html>
angular.module('app', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
// We must whitelist the JSONP endpoint that we are using to show that we trust it
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://angularjs.org/**'
]);
}])
.controller('ctrl', ['$scope', '$http',
function($scope, $http) {
$scope.method = "POST";
$scope.url = 'User.json';
$scope.ctrl = function () {
$scope.Name = null;
$scope.Surname = null;
$scope.Project = null;
$scope.Group = null
$http({method: $scope.method, url: $scope.url}).
then(function(response) {
$scope.Name = response.Name;
$scope.Surname = response.Surname;
$scope.Project = response.Project;
$scope.Group = response.Group;
}, function(response) {
$scope.Name = response.Name;
$scope.Surname = response.Surname;
$scope.Project = response.Project;
$scope.Group = response.Group;
});
};
$scope.updateModel = function(method, url) {
$scope.method = method;
$scope.url = url;
};
}]);
