Question

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

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

在一个帖子请求中提交3个表单。
3提交3份表格的要求。

我正在使用AngularJS。

Answer 1

这完全取决于您在页面上尝试完成的内容。理想情况下，您只需要一个带有一个提交按钮的表单。我可以看到有三个表单和三个提交按钮的唯一原因是，如果您不需要在同一会话中提交另外一个或两个表单。虽然看到你正在使用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

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

具有多表单组件的单页 - 使用单个提交按钮提交表单的单个或多个发布请求

1 个答案: