我該如何在角度http帖子中傳輸我的數據輸入

Question

我想使用沒有php的網絡服務。 使用Angular，如何使用表單的輸入參數執行Web服務。 這是REST配置。 我嘗試用POSTMAN查詢

mY WEB PAGE : 


----------------------------------------------------------------------------


 <!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <title>connexion.html</title>
        <script type="text/javascript" src="angular.js"></script>
    </head>

    <form ng-submit ng-controller="valController" data-action="http://localhost:8080/globalAlfWs/cxf/user/login">

        <input type="text" name="login" ng-model="login">
        <input type="text" name="password" ng-model="password">
        <input type="submit" id="submit" value="Submit">

    </form>
</html>

//帶有網絡服務鏈接的MY CONTROLLER：

var app = angular.module("app",[]);
   app.controller('valController',function($scope, $http){
        $scope.submit = function(){
            $http({
              method:'POST',
                                   url:"http://localhost:8080/globalAlfWs/cxf/user/login",
                                        data : {
                                            login: $scope.login,
                                            password: $scope.password
                                        },
                                        headers: {
                                            'Content-Type': 'application/json'
                                        }
                                    })
                                            .success(function(response){
                                                $scope.result = response;
                                                console.log(result);
                                            })
                                            .error(function(){
                                                console.log("error");
                                            });
                                };
                            });
----------------------------------------------------------------------------
This is my result with POSTMAN :

{
  "results": {
    "sessionId": "TICKET_9aee7b3f48fc12e558e6f56b1ede1aea0428cf78",
    "success": true,
    "userName": "login"
  }
}

我的JS小提琴：代碼

編輯/

var appel = angular.module("appel",[]);

appel.controller（'ValController'，function（$ scope，$ http）{

    var data = new FormData;

    $scope.submit = function(){
        data.append("login",$scope.login);
        data.append("password",$scope.password);
        $http({
            method:'POST',
            url:"http://localhost:8080/globalAlfWs/cxf/user/login",
            data : data,
           headers: {
                'Content-Type': undefined
            }
        })
            .success(function(response){
                $scope.result = response;
                console.log($scope.result);
            })
            .error(function(){
                console.log("error");
            });
    };
});

有用！！

Answer 1

這應該為您工作，因為您缺少對ngSubmit上的Submit函數的調用：

 <!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <title>connexion.html</title>
        <script type="text/javascript" src="angular.js"></script>
    </head>

    <form ng-submit="submit()" ng-controller="valController">

        <input type="text" name="login" ng-model="login">
        <input type="text" name="password" ng-model="password">
        <input type="submit" id="submit" value="Submit">

    </form>
</html>

JS：

    $scope.submit = function(){
        var data = new FormData;
        data.append("login", $scope.login);
        data.append("password", $scope.password);
        $http({
            method:'POST',
            url:"http://localhost:8080/globalAlfWs/cxf/user/login",
            data : data,
           headers: {
                'Content-Type': undefined
            }
        })
            .success(function(response){
                $scope.result = response;
                console.log($scope.result);
            })
            .error(function(){
                console.log("error");
            });
    };
});

讓我知道您是否還有其他問題。

Answer 2

如果使用submit按鈕並在表單上submit操作，則需要刪除data-action屬性。 否則，“提交”按鈕將觸發操作URL上的表單提交，並且您的ajax請求不起作用。

這是我對您的jsFiddle所做的修改，並且可以在我使用的Mock URL上使用。

<form ng-submit ng-controller="valController" >

   $scope.submit = function(){
        $http({
            method:'POST',
            url:"http://jsonplaceholder.typicode.com/posts",
            data : {
                login: $scope.login,
                password: $scope.password
            },
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .success(function(response){
                $scope.result = response;
                console.log($scope.result);
            })
            .error(function(){
                console.log("error");
            });
    };

我該如何在角度http帖子中傳輸我的數據輸入

問題描述

2 個解決方案

解決方案1
0 已采納 2015-10-08 10:33:31

解決方案2
0 2015-10-08 18:05:39

我該如何在角度http帖子中傳輸我的數據輸入

問題描述

2 個解決方案

解決方案1 0 已采納 2015-10-08 10:33:31

解決方案2 0 2015-10-08 18:05:39

解決方案1
0 已采納 2015-10-08 10:33:31

解決方案2
0 2015-10-08 18:05:39