离子，Angularjs，Mysql http post

Question

我刚刚发现了一个离子框架并试图学习它，但我遇到了一些我无法弄清楚的障碍，试图搜索 google 对我没有太大帮助。

我正在尝试创建一个将检查到 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>

无法弹出消息。有人可以指出问题出在哪里吗？

先致谢

Answer 1

尝试使用一个对象（例如$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() 方法的参数传递。

离子，Angularjs，Mysql http post

Ionic, Angularjs, Mysql http post

angularjs

ionic