Ionic，Angularjs，Mysql http post

我剛剛發現一個離子框架，並試圖學習它，但我遇到了一些障礙，我無法弄清楚，試圖搜索谷歌並沒有多大幫助。Ionic，Angularjs，Mysql http post

我想創建一個登錄表單，將檢查到MySQL數據庫，但它不工作，我不知道問題在哪裏。

這裏是我的代碼

的login.html

<ion-header-bar align-title="center" class="bar-balanced"> 
    <h1 class="title">Test</h1> 
</ion-header-bar> 
<ion-view title="Sign-In"> 
    <ion-content class="padding has-header"> 
    <ion-list> 
     <ion-item> 
      <input type="text" ng-model="username" placeholder="Username"> 
     </ion-item> 
     <ion-item> 
      <input type="password" ng-model="password" placeholder="Password"> 
     </ion-item> 
    </ion-list> 

    <button nav-clear class="button button-block button-balanced" ng-click="LogIn()">Login</button> 
    </ion-content> 
</ion-view>

的login.php

<?php 
    // check username or password from database 
    $postdata = file_get_contents("php://input"); 
    $request = json_decode($postdata); 
    $user = $request->user; 
    $password = $request->password; 

    mysql_connect("localhost", "username", "password"); 
    mysql_select_db("dbname"); 
    $results = mysql_query("SELECT name, city FROM tbl_user WHERE name='".user."' AND city='".$password."' LIMIT 1") or die('{"error":"Login error! Code: 003"}'); 
    $match = mysql_num_rows($results); 
    if($match > 0){ 
     echo "1"; 
    }else{ 
     echo "0"; 
    } 
?>

app.js

angular.module('ionicApp', ['ionic','starter.controllers']) 
.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 

    .state('app', { 
     url: "/app", 
     abstract: true, 
     templateUrl: "templates/menu.html", 
     controller: 'AppCtrl' 
    }) 

    .state('login', { 
     url: "/login", 
     templateUrl: "templates/login.html", 
     controller: 'LoginCtrl' 
    }); 

    $urlRouterProvider.otherwise('/login'); 
});

個

controller.js

angular.module('starter.controllers', []) 

.controller('LoginCtrl', function($scope, $state, $http) { 
    $scope.LogIn = function() { 
    var request = $http({ 
     method: "post", 
     url: "http://www.mywebsite.com/api/login.php", 
     data: { 
     user: $scope.username, 
     password: $scope.password 
     }, 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }); 
     /*Successful HTTP post request or not */ 
     request.success(function (data){ 
     if (data == '1'){ 
      $scope.responseMessage = "You are in"; 
     } 
     else { 
      $scope.responseMessage = "Username or Password is incorrect"; 
     } 
     }) 
    } 
});

的index.html

<!DOCTYPE html> 
<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 


    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <!--<script src="js/services.js"></script>--> 
    </head> 
    <body> 
     <ion-nav-view animation="slide-left-right"></ion-nav-view> 
    </body>

它不能彈出消息。有人可以指出我的問題在哪裏？前

來源

2016-01-11 Joseph Goh

你在控制檯中檢查過嗎？ –

我發現問題是CORS，已經啓用了CORS，但是又出現了另一個問題，即使我輸入了正確的用戶名和密碼組合，仍然認爲是錯誤的用戶名和密碼。我如何檢查登錄api使用的查詢？ –

爲什麼controller.js無法從login.html獲取輸入文本的值？在控制檯嘗試，它說'TypeError：不能讀取屬性'用戶名'未定義' –

試

由於使用一個對象（例如$scope.user）在其中存儲的用戶名和密碼。因此，代碼變成如下：

的login.html

<ion-list> 
    <ion-item> 
     <input type="text" ng-model="user.username" placeholder="Username"> 
    </ion-item> 
    <ion-item> 
     <input type="password" ng-model="user.password" placeholder="Password"> 
    </ion-item> 
</ion-list>

controller.js

.controller('LoginCtrl', function($scope, $state, $http) { 
    $scope.user = {}; 
    $scope.LogIn = function() { 
    var request = { 
     method: "post", 
     url: "http://www.mywebsite.com/api/login.php", 
     data: { 
     user: $scope.user.username, 
     password: $scope.user.password 
     }, 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }; 
     /*Successful HTTP post request or not */ 
     $http(request).then(function (response){ 
     if (response.data == '1'){ 
      $scope.responseMessage = "You are in"; 
     } 
     else { 
      $scope.responseMessage = "Username or Password is incorrect"; 
     } 
     }) 
    } 
});

另一個建議是在正確的形式使用$ HTTP：

$http({ 
    ... 
}).then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
    }, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    });

請參閱https://docs.angularjs.org/api/ng/service/$http

N.B .:如果您想要，您可以直接將用戶對象作爲LogIn（）方法的參數傳遞。

來源

2016-01-11 09:07:50 beaver

嘗試你的代碼，但沒有解決錯誤，發生同樣的錯誤，試圖直接傳遞用戶對象，因爲LogIn（用戶）沒有任何幫助。 –

如果你添加console.log（$ scope.user）;在$ scope.LogIn（）函數裏面收到一個空的對象？ – beaver

是的，我將在控制檯日誌中收到未定義的狀態。 –

Ionic，Angularjs，Mysql http post

回答

相關問題