javascript — простая страница входа — форма сообщения не работает

Здравствуйте, у меня есть простая страница входа, которая отлично работает, когда я использую загрузчик, но я хочу использовать угловой дизайн материала.

Я ищу проблему с 3-4 часов и ничего. Я думаю, что эта форма не отправляет данные, такие как имя пользователя, пароль и отправить

Есть полный код логина

<!DOCTYPE html>
<html>

<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="img/png" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!-- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <script src="../js/jquery-3.1.1.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="../bower_components/angular-material-data-table/dist/md-data-table.min.css" />
</head>

<body layout="row">
<div layout="column" flex id="content" role="main" ng-controller="AppCtrl" ng-app="MyApp">
<md-content layout="vertical" flex id="content" layout-align="center center">
<?php include "connect.php"; if(isset($_POST['username']) && isset($_POST['password'])){ $username=$ _POST['username']; $password=md5($_POST[ 'password']); $stmt=$ db->prepare("SELECT * FROM login WHERE username=? AND password=? "); $stmt->bindParam(1, $username); $stmt->bindParam(2, $password); $stmt->execute(); $row = $stmt->fetch(); $user = $row['username']; $pass = $row['password']; $id = $row['id']; $type = $row['type']; if($user==$username && $pass==$password){ session_start(); $_SESSION['username'] = $user; $_SESSION['password'] = $pass; $_SESSION['id'] = $id; $_SESSION['type'] = $type; ?>
<script>
window.location.href = 'index.php'
</script>
<?php } else { ?>
<div>
<strong>Warning!</strong> Password or username are wrong!
</div>
<?php } } ?>
<form method="post" name="loginForm" style="width:50vh">
<br />
<br />

<md-toolbar>
<div class="md-toolbar-tools">
<h2>Login</h2>
</div>
</md-toolbar>

<md-dialog-content>
<div>
<md-input-container class="md-block">
<label>Username:</label>
<input name="username" required>
</md-input-container>
<md-input-container class="md-block">
<label>Password:</label>
<input type="password" name="password" required>
</md-input-container>
</div>
</md-dialog-content>

<md-dialog-actions layout="row">
<span flex></span>
<md-button type="submit" value="Login" class="md-primary">OK</md-button>
<md-button type="button" aria-label="Cancel">Cancel</md-button>
</md-dialog-actions>
</form>
</md-content>

</div>

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-material/angular-material.js"></script>
<script src="../bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- <script src="js/app.js"></script> -->
<script>
angular.module('MyApp', ['ngMaterial'])

.controller('AppCtrl', function($scope) {

$scope.radek = "Radek";
console.log($scope.radek);

});
</script>
</body>
</html>

0

Решение

В AngularJS формы нужны ng-submit директивы.

<form method="post" name="loginForm" ng-submit="submit()">

Поскольку роль форм в клиентских приложениях AngularJS отличается от классических двусторонних приложений, желательно, чтобы браузер не преобразовывал отправку формы в полную перезагрузку страницы, которая отправляет данные на сервер. Вместо этого должна быть запущена некоторая логика JavaScript для обработки отправки формы в зависимости от приложения.

По этой причине, AngularJS предотвращает действие по умолчанию (отправка формы на сервер), если для элемента не указан атрибут action.

Вы можете использовать один из следующих двух способов, чтобы указать, какой метод javascript должен вызываться при отправке формы:

  • ngSubmit директива на элемент формы
  • ngClick директива для первой кнопки или поля ввода типа submit (input [type = submit])

Для получения дополнительной информации см .:


Я делаю что-то не так Вот код поста $ http. Ты можешь посмотреть?

При использовании службы AngularJS $ http тип содержимого по умолчанию: application/json и объекты данных автоматически кодируются в строки JSON.

$scope.submit = function () {
var httpPromise = $http({
method: "POST",
url: "login.php",
data: {
username: $scope.username,
password: $scope.password
}
}).then(function(response) {
console.log("POST SUCCESSFUL");
return response;
}).catch(function(response) {
console.log("POST REJECTED");
throw response;
});

Если серверный API может принимать только POST с типом контента application/x-www-form-urlencodedто данные должны быть URLencoded:

$scope.submit = function () {
var httpPromise = $http({
method: "POST",
url: "login.php",
data: {
username: $scope.username,
password: $scope.password
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
//URLencode the request
transformRequest: $httpParamSerializer
//OR
//transformRequest: $httpParamSerializerJQLike
});
};

Для получения дополнительной информации см.

1

Другие решения

Вы копировали / вставляли?

$username=$ _POST[ 'username']; $password=m d5($_POST[ 'password']);

$ _POST имеет пробел и md5 тоже.
Должно быть:

$username=$_POST['username']; $password=md5($_POST['password']);
0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector