htmlフォームからデータ値を収集して角httpポストでデータを送信する入力タイプのテキスト

角度HTTP POSTメソッドを使用してデータをポストしようとしています。私の要件はフォームがフィールドである場合です。送信ボタンをクリックすると、すべてのフィールド入力値を収集することによってHTTP POSTメソッドが呼び出されます。このシンプルスニペットコードを試してみましたが、フォームフィールド値を収集してからHTTP POSTメソッドを呼び出す方法はわかりません。htmlフォームからデータ値を収集して角httpポストでデータを送信する入力タイプのテキスト

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

あなたは、あなたのユーザーオブジェクトのプロパティに文字列を代入している。この

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

ようuserオブジェクト内のあなたの変数を格納することができます。コードを次のように変更してください：

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ポストでデータを送信する入力タイプのテキスト

答えて

関連する問題