简单的登录页面-表单方法发布不起作用

Question

您好，我有一个简单的登录页面，当我使用自举程序但我想使用棱角材质设计时，该页面可以正常工作。

我从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>

Answer 1

在AngularJS中，表单需要ng-submit指令。

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

由于表单在客户端AngularJS应用程序中的作用不同于传统的双向应用程序，因此浏览器最好不要将表单提交转换为将数据发送到服务器的整页重新加载。 相反，应触发一些javascript逻辑以以特定于应用程序的方式处理表单提交。

因此，除非元素指定了action属性，否则AngularJS会阻止默认操作 （将表单提交到服务器）。

您可以使用以下两种方法之一来指定提交表单时应调用的javascript方法：

表单元素上的ngSubmit指令
提交类型（input [type = submit]）的第一个按钮或输入字段上的ngClick指令

有关更多信息，请参见：

我做错了这是$ 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仅接受内容类型为application/x-www-form-urlencoded的POST，则需要对数据进行URL编码：

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

有关更多信息，请参见

Answer 2

您复制/粘贴了吗？

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

$ _POST也有一个空格和md5。 应该：

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

简单的登录页面-表单方法发布不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-02-20 01:48:13

解决方案2
0 2017-02-19 21:03:13

简单的登录页面-表单方法发布不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-02-20 01:48:13

解决方案2 0 2017-02-19 21:03:13

解决方案1
1 已采纳 2017-02-20 01:48:13

解决方案2
0 2017-02-19 21:03:13