douzi7890
douzi7890
2017-02-19 20:42

简单的登录页面 - 表单方法帖子不起作用

已采纳

Hello I have simple login page which works fine when I am using bootstrap but I want to use angular material design.

I am looking for problem from 3-4 hrs and nothing. I think that form doesn't send any data like username, password and submit

There is full code of login

<!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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douzhankui0758 douzhankui0758 4年前

    In AngularJS, forms need an ng-submit directive.

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

    Since the role of forms in client-side AngularJS applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in an application-specific way.

    For this reason, AngularJS prevents the default action (form submission to the server) unless the element has an action attribute specified.

    You can use one of the following two ways to specify what javascript method should be called when a form is submitted:

    • ngSubmit directive on the form element
    • ngClick directive on the first button or input field of type submit (input[type=submit])

    For more information, see:


    I do something wrong Here is code of $http post. Can you look?

    With the AngularJS $http service, the default content type is application/json and data objects are automatically encoded into JSON strings.

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

    If the server API can only accept a POST with content type application/x-www-form-urlencoded, then the data needs to be 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
        });
    };
    

    For more information, see

    点赞 评论 复制链接分享
  • douju2053 douju2053 4年前

    Did you copy/paste?

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

    $_POST has a space and md5 too. Should be:

    $username=$_POST['username']; $password=md5($_POST['password']);
    
    点赞 评论 复制链接分享

相关推荐