通過從html表單輸入類型文本中收集數據值發送角度http post中的數據

我想通過使用角度HTTP發佈方法發佈數據。我的要求是一旦表單字段比單擊提交按鈕通過收集所有字段輸入值調用HTTP post方法。我已經嘗試過這個簡單的片段代碼，但不知道如何收集表單字段值，然後調用HTTP post方法。通過從html表單輸入類型文本中收集數據值發送角度http post中的數據

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <title> Simple Signup page</title> 
</head> 

<body> 
    <h1><b>signup</b></h1> 
    <form ng-controller="signupController"> 

     First Name:<input type="text" ng-model="first_name" placeholder="enter first_name"><br> 
     <br> Last Name:<input type="text" ng-model="last_name" placeholder="enter last_name"><br> 
     <br> Email-id: 
     <input type="text" ng-model="email_id" placeholder="enter email_id"><br> 
     <br> User-id: 
     <input type="text" ng-model="user_id" placeholder="enter user_id"><br> 
     <br> Password: 
     <input type="text" ng-model="password" placeholder="enter password"><br> 
     <br> Mobile: 
     <input type="text" ng-model="mobile" placeholder="enter mobile"><br> 
     <br> 

     <input type="button" ng-click="Signup(user)" name="name" value="Signup" </form> 
     <script src="script2.js"></script> 
     <script> 
      function signupController($scope, $http) { 
       $scope.first_name = "bht"; 
       $scope.last_name = "sh"; 
       $scope.email_id = "[email protected]"; 
       $scope.user_id = "bh5"; 
       $scope.password = "root"; 
       $scope.mobile = "8145455547"; 
       // trying to store data in user object 
       var user = { 
        first_name: "$scope.first_name", 
        last_name: "$scope.last_name", 
        email_id: "$scope.email_id", 
        user_id: "$scope.user_id", 
        password: "$scope.password", 
        mobile: "$scope.mobile" 
       }; 
       console.log("user array is:", user); 
       $scope.Signup = function(user) { 
        $http.post("http://localhost:1430/user/signup/user?tableName=signup", user).success(function(user) { 
         user.data 
        }); 
       }; 
      }; 
      var myApp = angular.module("myApp", []); 
      myApp.controller("signupController", signupController); 
     </script> 
</body> 

</html>

來源

2017-01-24 andy

您可以將user對象中的變量存儲這樣

function signupController($scope, $http) { 
 
    $scope.user = { 
 
    first_name: "bht", 
 
    last_name: "sh", 
 
    email_id: "[email protected]", 
 
    user_id: "bh5", 
 
    password: "root", 
 
    mobile: "8145455547" 
 
    }; 
 

 
    $scope.Signup = function() { 
 
    $http.post("http://localhost:1430/user/signup/user?tableName=signup", $scope.user) 
 
     .success(function(user) { 
 
     //handle success 
 
     }); 
 
    }; 
 
}; 
 

 
var myApp = angular.module("myApp", []); 
 
myApp.controller("signupController", signupController);

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

 
<body ng-app="myApp"> 
 
    <h1><b>signup</b></h1> 
 
    <form ng-controller="signupController"> 
 

 
    First Name: 
 
    <input type="text" ng-model="user.first_name" placeholder="enter first_name"> 
 
    <br> 
 
    <br>Last Name: 
 
    <input type="text" ng-model="user.last_name" placeholder="enter last_name"> 
 
    <br> 
 
    <br>Email-id: 
 
    <input type="text" ng-model="user.email_id" placeholder="enter email_id"> 
 
    <br> 
 
    <br>User-id: 
 
    <input type="text" ng-model="user.user_id" placeholder="enter user_id"> 
 
    <br> 
 
    <br>Password: 
 
    <input type="text" ng-model="user.password" placeholder="enter password"> 
 
    <br> 
 
    <br>Mobile: 
 
    <input type="text" ng-model="user.mobile" placeholder="enter mobile"> 
 
    <br> 
 
    <br> 
 
    <input type="button" ng-click="Signup()" name="name" value="Signup" /> 
 

 
    </form> 
 
</body>

來源

2017-01-24 10:39:42 Weedoze

您指定的字符串到您的用戶對象的屬性;只需將您的代碼更改爲：

var user = { 
    first_name: $scope.first_name, 
    last_name: $scope.last_name, 
    email_id: $scope.email_id, 
    user_id: $scope.user_id, 
    password: $scope.password, 
    mobile: $scope.mobile 
};

來源

2017-01-24 10:39:56 Dario

首先使用您的初始數據初始化用戶對象。

var user = { 
    first_name:"bht", 
    last_name:"$sh", 
    email_id:"[email protected]", 
    user_id:"bh5", 
    password:"root", 
    mobile:"8145455547" 
};

然後，在HTML中使用這個對象。

First Name:<input type="text" ng-model="user.first_name" placeholder="enter first_name"><br> 
<br> 
Last Name:<input type="text" ng-model="user.last_name" placeholder="enter last_name"><br> 
<br> 
Email-id:<input type="text" ng-model="user.email_id" placeholder="enter email_id"><br> 
<br> 
User-id:<input type="text" ng-model="user.user_id" placeholder="enter user_id"><br> 
<br> 
Password:<input type="text" ng-model="user.password" placeholder="enter password"><br> 
<br> 
Mobile:<input type="text" ng-model="user.mobile" placeholder="enter mobile"><br>

來源

2017-01-24 10:41:43

通過從html表單輸入類型文本中收集數據值發送角度http post中的數據

回答

相關問題