Ionic, Angularjs, Mysql http post

2019-06-10 05:57发布

站内问答 / 移动开发
823 1 6

I am just found out an ionic framework and was trying to learn it, but i meet some obstacle that i cannot figure out, tried to search for google does not help me much.

I am trying to create a login form that will be checked to mysql database, but it does not work, i am not sure where is the problem.

Here is my code

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>

It cannot popup the message. Someone can point me where is the problem?

Thanks before

1条回答
一纸荒年 Trace。
2楼-- · 2019-06-10 06:21

try to use an object (for example $scope.user) in which to store username and password. So the code becomes as below:

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

Another suggestion is to use $http in the right form:

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

See https://docs.angularjs.org/api/ng/service/$http

N.B.: if you want you can pass the user object directly as argument of LogIn() method.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)