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

我的小提琴： code

编辑/

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

appel.controller（＆＃39; ValController＆＃39;，函数（$ 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上错过了对提交功能的调用：

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

如果您在表单上使用data-action按钮和submit操作，则需要删除submit属性。否则，提交按钮会触发操作URL上的表单提交，并且您的ajax请求不起作用。

以下是我对jsFiddle所做的修改，它适用于我使用过的模拟网址。

<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 post中传输我的数据输入

2 个答案: