Question

在我的index.html中，我有一个button我以前用来提交数据然后发送到我的数据库。但是，我最近更改了布局以包含依赖CSS的标签。

现在，相同的button仅刷新页面，并且不对数据执行任何操作。我尝试更改button类型，form，添加evt.preventDefault()等等无济于事。

以下是我form的{{1}}，为了方便起见，我减少了一些标签的重复。

index.html

这是我的控制器表格：

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

Answer 1

表单提交处理程序（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（）调用检索它。

HTML按钮刷新页面而不是向DB发送数据

1 个答案: