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

回答

相关问题