HTML按钮刷新页面而不是发送数据到数据库

在我的index.html中，我有一个button，我以前用它来提交数据，然后发送到我的数据库。不过，我最近更改了布局以包含依赖于CSS的选项卡。HTML按钮刷新页面而不是发送数据到数据库

现在，同样的button只刷新页面，并没有对数据做任何事情。我试过更改button类型，form，加入evt.preventDefault()等。无济于事。

这是我的index.html的form，为了方便起见，我减少了一些标签的重复。

<!DOCTYPE html> 
    <html ng-app> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" /> 
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <% include header %> 
    <% include navbar %> 
    <p> 
    extra &nbsp;&nbsp; space 
    <body> 
    <!-- tabs --> 
    <div class="pcss3t pcss3t-effect-scale pcss3t-theme-1"> 
    <input type="radio" name="pcss3t" checked id="tab1"class="tab-content-first"> 
    <label for="tab1"><i class="icon-calendar"></i>Client</label> 
    <!-- tab contents --> 
    <li class="tab-content tab-content-3 typography"> 
    <!-- /container --> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#home').addClass("active"); 
    }); 
    </script> 
    <h1>Clients</h1> 
    <div class="container"> 
    <div ng-controller="ClientCtrl"> 
    <span>{{remaining()}} of {{clients.length}} remaining</span> [ <a 
    href="" ng-click="archive()">archive</a> ] 
    <ul class="unstyled"> 
    <li ng-repeat="client in clients"><input type="checkbox" 
    ng-model="client.done"> <span class="done-{{client.done}}">{{client.text}} 
    </span> 
    </li> 
    </ul> 
    <form ng-submit="addClient()"> 
    <div class="col-lg-6"> 
    <div class="input-group input-group-lg"> 
    <input class="form-control" type="text" ng-model="clientText" 
    size="30" placeholder="add new client here"> <spanclass="input-group-btn"> 
    <button class="btn btn-primary btn-lg" type="button">Add</button> 
    </span> 
    </div> 
    </div> 
    </form> 
    </div> 
    </div> 
</div>

这是我的控制器形式：点击按钮结果时，在命令提示接收

function ClientCtrl($scope, $http) { 
$scope.clients = []; 
$http.get('/client').success(function(data, status, headers, config) { 
    $scope.clients = data; 
    if (data == "") { 
     $scope.clients = []; 
    } 
}).error(function(data, status, headers, config) { 
    console.log("Ops: could not get any data"); 
}); 
} 
} 
$scope.addClient = function() { 
    $http.post('/client', { 
     text : $scope.clientText, 
     done : false, 
    }).success(function(data, status, headers, config) { 
     $scope.clients.push({ 
      text : $scope.clientText, 
      done : false 
     }); 
     $scope.clientText = ''; 
    }).error(function(data, status, headers, config) { 
     console.log("Ops: " + data); 
    }); 
}; 

$scope.remaining = function() { 
    var count = 0; 
    angular.forEach($scope.clients, function(client) { 
     count += client.done ? 0 : 1; 
    }); 
    return count; 
}; 

$scope.archive = function() { 
    var oldClients = $scope.clients; 
    $scope.clients = []; 
    angular.forEach(oldClients, function(client) { 
     if (!client.done) 
      $scope.clients.push(client); 
    }); 
}; 
}

消息：

GET/304 2ms 
GET /stylesheets/style.css 304 1ms 
GET /js/todo.js 404 0ms 
GET /js/todo.js 404 0ms

来源

2016-05-10 Aaron Oberländer

甲形式提交处理程序（ng-submit，或onsubmit）旨在将数据提交到表单的action属性中提供的路径。如果没有任何属性，数据将被提交到当前地址，页面将刷新。

为了避免默认行为，您从ng-submit调用的方法必须返回false。这将防止发生重定向，并允许您的范围更改被保留。

$scope.addClient = function() { 
    $http.post('/client', { 
    text : $scope.clientText, 
    done : false, 
    }).success(function(data, status, headers, config) { 
    $scope.clients.push({ 
     text : $scope.clientText, 
     done : false 
    }); 
    $scope.clientText = ''; 
    }).error(function(data, status, headers, config) { 
    console.log("Ops: " + data); 
    }); 
    return false; 
};

n.b.根据你的描述，由于在页面刷新之后通过调用/ client端点上的GET来更新数据，因此你的持久性或数据检索可能会有一些问题。您的实现应该使用post（）调用来存储数据，然后在页面重新加载时使用get（）调用来检索它。

来源

2016-05-10 22:16:06

我试过你的建议，但不幸的是它没有奏效。我从html中删除了标签设计，并且这样做了。由CSS给出的制表符上的动画会混淆提交按钮的动作并将其变为动画？ –

我很惊讶，解决了这个问题;在这种情况下影响按钮点击的标签似乎不太可能，除非出现一些古怪的事情。例如，如果您的选项卡的点击处理程序吞噬提交按钮的点击事件。 –

那肯定是这样，不幸的是，我还没有找到让他们共存的方法。 –

HTML按钮刷新页面而不是发送数据到数据库

回答

相关问题