Кнопка HTML обновляет страницу вместо отправки данных в БД

В моем index.html у меня есть button, который я использовал ранее для отправки данных, которые затем отправляются в мою БД. Тем не менее, я недавно изменил макет, чтобы включить вкладки, которые полагаются на CSS.Кнопка HTML обновляет страницу вместо отправки данных в БД

Теперь тот же button обновляет страницу и ничего не делает с данными. Я попытался изменить тип button, form, добавив evt.preventDefault() и т. Д. Безрезультатно.

Вот form моего 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); 
    }); 
}; 
}

Сообщение получено в командной строке при нажатии кнопки приводит к:

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. Основываясь на вашем описании, поскольку данные не обновляются после обновления страницы, вызывая GET на конечной точке/client, возможно, что-то с вашей персистентностью или извлечением данных. Ваша реализация должна хранить данные с вызовом post(), а затем извлекать их при вызове get() при перезагрузке страницы.

источник

2016-05-10 22:16:06

Я попробовал ваше предложение, но, к сожалению, оно не сработало. Я удалил дизайн вкладки из html, и это сделало трюк. Есть анимация на вкладках, заданная CSS, может ли это запутать действие кнопки отправки и превратить ее в анимацию? –

Я удивлен, что решил проблему; вкладки, влияющие на нажатие кнопки в этом сценарии, не кажутся очень вероятными, если не произойдет что-то странное. Например, если ваш обработчик кликов для вкладок поглощает событие клика для кнопки отправки. –

Это должно быть так, я пока не нашел способ для них сосуществовать, к сожалению. –

Кнопка HTML обновляет страницу вместо отправки данных в БД

ответ

Смежные вопросы