Отображение данных формы с углового на сервере с использованием $ http

-1

Я использую форму в html, используя углы и привязывая имя пользователя и адрес электронной почты пользователя.

Я хочу отобразить детали конкретного пользователя на странице сервера, где, когда пользователь нажимает кнопку «Отправить данные» на лицевой стороне, данные «привязаны», и информация одновременно отображается на странице сервера.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 


<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 

<title>Random title here</title> 

<body ng-app="test" ng-controller="mainctrl as ctrl"> 
<div class="container"> 
<div class="col-sm-8 col-sm-offset-2"> 
<form name="userform" ng-submit="ctrl.submit()"> 
<div class="form-group"> 
<label> Name</label> 
<input type="text" name="name" class="form-ctrl" ng-model="ctrl.user.name"> 

</div> 
<div class="form-group"> 
<label> Email id</label> 
<input type="email" name="email" class="form-ctrl" ng-model="user.email"> 

</div> 

<button type="submit" class="btn btn-primary"> Submit </button> 

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


<script> 
var test=angular.module('test',[]); 
test.controller('mainctrl',[function($scope,$html){ 
$scope.user={}; 
$scope.submit= function() { 
    $http({ 
     method : 'POST', 
     url : 'test1.java', //No idea what to put here. Help pls. 
     data : $scope.user; 
    headers : {'Content-Type':'application/x-www-form-urlencoded'} 
    }).success(function(data) 
      { 
     console.log("Success"); 
      }); 
} 
}]); 

</script> 
</body> 
</html>

Это всего лишь образец кода, который я набрал. В качестве новичка любая помощь будет оценена по достоинству. Благодарю.

источник

2015-11-25 Shivang Kapoor

Здравствуйте. Насколько я понял, вы хотите отправить данные на бэкэнд-стороне? –

Вам нужно указать URL-адрес для вашей конечной точки отдыха. Попробуйте проверить ошибку в консоли хром и посмотреть, как угловой формирует полный URL. Если это не так, попробуйте исправить его. – Aashish

@ Бахтиер Гайбуллоев Да. На данный момент я просто хочу, чтобы, когда пользователь отправляет свои данные, то есть его имя пользователя и идентификатор электронной почты, данные должны отображаться на странице сервера. После прохождения нескольких ссылок каждый обычно получает данные в $ http через GET или POST, а затем передает информацию в пользовательский интерфейс. Но здесь я хочу сделать наоборот. Просто прочитайте данные из формы и отобразите их на странице сервера. –

Если вы используете синтаксис controller as, то вам следует написать свою функцию со ссылкой this. Ваш контроллер сниппет будет как

angular.module('test',[]) 
    .controller('mainctrl',[function($scope, $http){ 
    var cm = this; 
    cm.user={}; 
    cm.submit= function() { 
     $http({ 
      method : 'POST', 
      url : form.attributes['target'], 
      data : cm.user; 
     }).success(function(data) 
      { 
     console.log("Success"); 
      }); 
    } 
}]);

и передать элемент управления в вашем ng-submit директивы. Как

<form name="userform" ng-submit="ctrl.submit($element.action)">

источник

2015-11-25 05:32:56 Vineet

Большое спасибо за головы. Это будет иметь в виду. –

@ShivangKapoor, если вы найдете мой ответ полезен, пожалуйста, не забывайте повышать. – Vineet

Нужно заработать +15 репутации за голосование. : D Но обязательно сделаю это, как только я доберусь до этого уровня. –

Надеюсь, мой код будет вам полезен!

Вид:

<body ng-controller="UserDataController"> 
<form ng-submit="sendData(user)"> 
    <input type="text" placeholder="name" ng-model="user.name" /> 
    <input type="text" placeholder="second name" ng-model="user.second_name" /> 
    <button type="submit" class="btn btn-sm btn-primary"> 
       Save 
    </button> 
</form >

Cotroller:

angular.module('httpExample', []) 
    .controller('UserDataController', ['$scope', '$http', function($scope, $http) { 
     $scope.user = {}; 

     $scope.sendData= function(user) { 
      $http.post("/SomeUrl", user).success(function(data, status) { 
       console.log(data); 
       console.log(status); 

       $scope.data = data; 
       // now you can write {{data}} at your veiw 
       // example {{data.id}} 
      }); 
     }]);

Пример: получить request

источник

2015-11-25 07:40:25

какой вид фреймворков, которые вы используете на бэкэнд? –

Jax-RS/Jersey на данный момент. –

, поэтому, если вы используете мой код, вы будете отправлять свои данные на свой сервер. На бэкэнд вы должны взять запрос с данными. У вас еще есть вопрос? –

Отображение данных формы с углового на сервере с использованием $ http

ответ

Смежные вопросы