2017-02-19 40 views
0

你好我有簡單的登錄頁面,當我使用引導程序時工作正常,但我想使用角度材料設計。簡單的登錄頁面 - 表單方法文章不起作用

我正在尋找從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

是否有任何來自瀏覽器控制檯的錯誤日誌? – lxe

+0

沒有任何東西,即使我點擊按鈕或放錯日期 – Defus

+0

@Ixe從服務器有日誌 mod_fcgid:stderr:PHP解析錯誤:語法錯誤,意外的'_POST'(T_STRING),期待變量(T_VARIABLE)或'$'in /第21行的var/www/clients/client1/web14/web/login/login.php 第21行= <?php – Defus

回答

1

在AngularJS,形式需要一個ng-submit指令。

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

由於在客戶端AngularJS應用形式的作用比在古典往返的應用程序不同,它是理想的瀏覽器不表單提交翻譯成將數據發送到服務器重新加載整個頁面。相反,應該觸發某些JavaScript邏輯來以特定於應用程序的方式處理表單提交。

因此,AngularJS會阻止默認操作(將表單提交給服務器),除非該元素具有指定的操作屬性。

您可以使用以下兩種方式之一,以指定當表單提交JavaScript方法應該叫:

  • ngSubmit指令表單元素上
  • ngClick指令的第一個按鈕或輸入類型的字段提交(輸入[類型=提交])

有關詳細信息,請參見:


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

隨着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訊息,然後將數據需要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 
    }); 
}; 

欲瞭解更多信息,請參閱

0

你複製/粘貼登錄的完整的代碼?

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

$ _POST也有空格和md5。 應該是:

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

在我的代碼中很好,我認爲這發生在我粘貼代碼的時候 – Defus