Html 带有多表单组件的单页-使用单个提交按钮提交表单的单个或多个post请求

我创建了一个包含3个组件（div）的页面，每个组件都有一个html表单，页面末尾有一个提交按钮

我想知道使用单个提交按钮提交表单的最佳设计是什么

在一次邮寄申请中提交3份表格

3提交3份表格的要求

---

我使用的是AngularJS。

这完全取决于您在页面上尝试完成的内容的上下文。理想情况下，您应该有一个表单和一个提交按钮。我能看到的使用三个表单和三个提交按钮的唯一原因是，如果您不要求在同一个会话中提交其他一个或两个表单。 尽管您使用的是angularjs，但您可以将所有内容收集到一个json对象中，并使用

$http

工厂

app.factory('dataHandler',['$http', function($http){
    var handle = this;
    handle.send = function(params, actionUrl){
        return $http({
            url: actionUrl,
            method: 'POST',
            params: formParams,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        });
    return handle;
}]);

控制器

app.controller('Stage', ['dataHandler', '$scope', function(dataHandler, $scope){
   var stage = this;
   stage.processForm = function(){
      dataHandler.sendOrder(stage.formInput, 'https://url.com/script')
        .then(function (response) {
           if (response.status == 200) {
               console.log('Yay it worked');
           }
        });
   }
}]);

html

提交

我不会有3个提交按钮。只有一个submit按钮，在submit事件中，我会发出3个独立的ajax请求，每个请求都有自己的回调。啊，好的，我已经更新了工厂，所以如果需要的话，你每次都可以传递不同的url。您仍然可以使用一个提交按钮，但如果需要将不同的信息发送到不同的URL，则可以将从表单收集的不同json对象传递给工厂函数。

<form id="Form" name="Form" novalidate="novalidate">
   <input type="checkbox" ng-model="stage.formInput.thisOption" ng-true-value="1" ng-false-value="0">
   <input type="text" name="address_street" ng-model="stage.formInput.details.address.street" required>
</form>
<form id="Form2" name="Form2" novalidate="novalidate">
   <input type="checkbox" ng-model="stage.formInput.thatOption" ng-true-value="1" ng-false-value="0">
   <input type="text" name="address_street" ng-model="stage.formInput.details.address.suburb" required>
</form>
<button ng-click="stage.processForm()" name="button">Submit</button>