使用AngularJS中的POST提交包含<keygen />的表单

时间:2015-12-09 07:10:58

标签: angularjs forms http-post spkac

我第一次使用POST Http Request在AngularJS中提交表单,特别是这个表单包含一个生成密钥的keygen元素,如下所示:

<keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden>

spkac元素到服务器总是空的,而且我认为我没有以正确的方式将数据从表单传递给POST,所以我的问题是:

  1. 如何将spkac设置为表单的参数部分?
  2. 这是将数据传递给AngularJS中的POST的正确方法吗?
  3. 编辑 表格:

        <form name="signupForm" id="signupForm" method="POST" ng-submit="create()">
                    <input type="hidden" name="username" id="username" value="mtest">
                    <input type="text" placeholder="Account name" name="webid" ng-model="account.webid" ng-focus="isFocused" ng-blur="isFocused = false"><br>
                    <input type="text" placeholder="Full name" name="name" ng-model="account.name"><br>
                    <input type="text" placeholder="Email" name="email" ng-model="account.email"><br>
                    <input type="text" placeholder="Picture URL" name="pictureURL" ng-model="account.pictureURL"><br>
    
                    <keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden>
    
                    <input type="submit" id="submit" value="Submit">
                </form>
    

    编辑 HTTP请求:

    $scope.signupForm = {};
    $scope.create = function () {
            document.getElementById("submit").value = "Creating...";
            var uri = "https://" + "...";
            //setting spkac part of the form's parameters
            $scope.account.spkac = document.getElementById("spkac");
    
            $http({
              method: 'POST', 
              url: uri,
              data: $.param($scope.account),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/x-x509-user-cert'
              },
              withCredentials: true
            }).
            success(function(data, status, headers) {
              if (status == 200 || status == 201) {
                  //Account created 
              }
            }).
    

    编辑2

    enter image description here

2 个答案:

答案 0 :(得分:0)

不要将整个表单作为数据传递给发布请求。相反,您应该将与该字段关联的模型传递给后期请求的data配置。

data : $.param({
  webid : webid,
  name : name,
  email : email
  ...
})

由于内容类型为application/x-www-form-urlencoded。您将在后端服务中获取所有模型值作为表单参数。

答案 1 :(得分:0)

解决!

因此,准备HTTP请求以执行此操作不会因某些原因而起作用。相反,需要设置表单操作并立即提交表单以便发送keygen。这是解决方案:

模板中的操作是参数化的:

    <form name="signupForm" id="signupForm" method="POST" action="{{actionUrl}}">
     ...
    <input type="submit" id="btnSubmit" value="Submit" ng-click="completeForm()">

并且控制器设置操作并按如下方式提交表单:

$scope.completeForm = function () {
        $scope.actionUrl = "https://" + document.getElementById("username").value + "...";
        document.getElementById("signupForm").submit();     
};