douzi7890 2017-02-19 20:42
浏览 59
已采纳

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

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 2017-02-20 01:48
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥30 python代码，帮调试，帮帮忙吧