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按鈕刷新頁面而不是發送數據到數據庫

回答

相關問題