angularjs - 提交表格包含在 AngularJS 中使用 POST

Question

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

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

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

1. 如何将 spkac 设置为表单的参数部分？
2. 这是将数据传递到AngularJS中的POST的正确方法吗？

编辑 表格：

    <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

Answer 1

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

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

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

Answer 2

解决了！

因此，出于某种原因，准备一个 HTTP 请求来做这件事是行不通的。相反，需要设置表单操作并立即提交表单，以便与它一起发送注册机。这里的解决方案：

在模板中，动作是参数化的：

    <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();     
};