使用 $http 在服务器上显示来自 Angular 的表单数据答案

【问题标题】：Display form data from angular on a server using $http使用 $http 在服务器上显示来自 Angular 的表单数据
【发布时间】：2016-02-27 19:06:57
【问题描述】：

我正在使用 html 中的表单，使用 angular，并绑定用户的用户名和电子邮件 ID。

我希望将特定用户的详细信息显示到服务器页面上，其中当用户单击前端的提交详细信息时，数据被“绑定”并且信息同时显示在服务器页面上。

<!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>

这只是我键入的代码示例。作为初学者，任何帮助将不胜感激。谢谢。

【问题讨论】：

你好。据我了解，您想将数据发送到后端？
您需要将 URL 放在您的休息端点那里。尝试检查 chrome 控制台中的错误，看看 angular 是如何形成完整 URL 的。如果这不正确，请尝试更正它。
@BakhtierGaibulloev 是的。现在，我只希望当用户提交他的数据时，即他的用户名和电子邮件 ID，数据需要显示在服务器页面上。在经过几个环节之后，大家一般都是通过GET或者POST获取$http里面的数据，然后把信息传递给UI。但在这里，我想做相反的事情。只需从表单中读取数据，并将其显示在服务器页面上。

标签： javascript html angularjs http server

【解决方案1】：

如果您使用controller as 语法，那么您应该参考this 编写您的函数。你的控制器 sn-p 就像

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)">

【讨论】：

非常感谢您的提醒。请记住这一点。
@ShivangKapoor 如果您觉得我的回答有用，请不要忘记点赞。
需要获得 +15 更多声望才能支持投票。 :D 但是一旦我达到那个水平，我肯定会这样做。
但是你能帮我看看如何使用表单中的数据将数据显示到服务器页面上。
你应该使用模型ng-model="ctrl.user.name" & ng-model="ctrl.user.email"，你会得到cm.user对象下的控制器数据

【解决方案2】：

希望我的代码对你有用！

查看：

<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 >

控制器：

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

【讨论】：

Jax-RS/Jersey 现在。
因此，如果您使用我的代码，您会将数据发送到您的后端。在后端，您应该接受数据请求。你还有什么问题吗？