Angular 表单提交两次（ajax 获取请求）答案

【问题标题】：Angular form submitting twice (ajax get request)Angular 表单提交两次（ajax 获取请求）
【发布时间】：2013-09-13 15:17:12
【问题描述】：

我有一个控制器，由于某种原因，它通过 AngularJs 中的 get 请求提交了两次表单。我可以在我的数据库中看到表单被提交了两次，并且在控制台网络选项卡中，它正在记录两次提交，但是，第一次提交具有 OPTIONS 的“请求方法”，第二次是 GET。我想这可能是一个线索。我有点困惑，因为我没有将任何“选项”传递给 get 方法，只是我提交的 URL。

HTML：

<div class="row">
    <div ng-controller="groupEditCtrl">
        <form class="span11" name="" novalidate ng-submit="createArtifact()">
            <legend>Create a new group</legend>
            <div class="row">
                <div class="span5">
                    <div class="control-group">
                        <div class="controls">
                            <input name="text" type="text" placeholder="Group Name" required ng-model="artifact.group_name" />
                        </div>
                    </div>
                </div>
                <div class="span5">
                    <p>
                        <small>What your artifact will look like:</small><br />
                        {{artifact.group_name}}
                    </p>
                </div>
            </div>

            <input name="token" type="hidden" required ng-model="window.token" />
            <div class="control-group">
                <div class="controls controls-row">
                    <button type="submit" class="btn" value="Submit" title="Submit">
                        <span>Submit</span>
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

控制器：

'use strict';

function groupEditCtrl($scope, $http, $routeParams, $cookie) {

    $scope.createArtifact = function(){
        var requestURL = window.base_url + "/Group/CreateGroup?callback=JSON_CALLBACK&token=" + window.token + "&group_name=" + $scope.artifact.group_name;
        $http.get( requestURL ).
            success(function(data, status, headers, config) {
                console.log('You have successfully submitted a Cause/CreateCause');
            }).
            error(function(data,status,headers,config){
                console.log('You have FAILED submitting a Cause/CreateCause');
            });
    }
};

【问题讨论】：

标签： javascript jquery ajax forms angularjs

【解决方案1】：

HTTP 选项请求正在向服务器询问它可以与服务器通信的允许方法（除其他外），因此这是正常的事情。

选项请求不应更改您后端中的任何内容，但它可能会如您所见那样被记录下来。仔细检查它是否没有改变任何东西（如果是，那么您的后端可能配置错误，如果是，您应该问另一个问题！）。

关于 OPTIONS 然后 GET，您的角度设置/使用没有任何问题。

【讨论】：

@ryanwells，嗯，我很害怕。所以你说这是某种后端问题。
我应该以不同的方式提交表单吗？也许附在提交按钮上的指令？是否有我在这里缺少的阻止默认选项或其他什么？我不明白。
他说这不是问题。它只是想检查请求类型在您请求的 url 上是否可用。
@ZackArgyle 谢谢，我意识到了这一点，但它仍在提交表单 2x。我可以通过我们在这里构建的不同 Web 界面直接添加工件，并且它不会重复。跨度>
@flashpunk AngularJS 不会两次提交表单；此 HTTP OPTIONS 请求称为 Preflighted Requests，最有可能用于 CORS。

【解决方案2】：

对我来说，标题：{'Content-Type': undefined} 工作，我看不到它再次调用两次。

$http.post("index.php", {id : $scope.A},{
    headers: {'Content-Type': undefined}})
    .success(function (response) {
       $scope.OK = response.POLL;
    }
}

【讨论】：

【解决方案3】：

原来这是我不知道的正在构建的自定义 api 的问题。

【讨论】：