Kendo UI登錄功能

Question

我目前正在使用Kendo UI製作iPhone應用程序，我正在通過手機間隙運行iPhone以測試它。

設計都很好地映射出來，我正在掌握Kendo框架。我正在嘗試使用某些功能登錄帳戶。

它運行查詢，並返回JSON我的外部PHP文件：

<?php 

    $arr = array(); 

//Takes the username and password from the login form and queries the database to find out if they have access to the site. 


     //Cleanse inputs 
     $username = $_GET['username']; 
     $password = md5_base64($_GET['password']); 

     $stmt = $memberMysqli->prepare("SELECT id, firstname, dob, sex, recordingWeight, blocked, enabled FROM member WHERE email = ? AND password = ?"); 
     $stmt->bind_param('ss', $username, $password); 
     $stmt->execute(); 
     $stmt->bind_result($memberid, $firstname, $dob, $sex, $recordingWeight, $blocked, $enabled); 
     $stmt->store_result(); 

     session_start(); 

     while ($stmt->fetch()) 
     { 
      $userIsBlocked = $blocked; 
      $enabled = $enabled; 
     } 

     if(($numRows = $stmt->num_rows) > 0) //If num rows is 1 the combination exists therefore it is a succesful login 
     { 
      if($userIsBlocked) 
      { 
       $arr['status'] = "error"; 
       $arr['message'] = "Sorry, your account isnt active. Please contact us to re-activate it."; 
      } 
      else if(!$enabled) 
      { 
       $arr['status'] = "error"; 
       $arr['message'] = "Sorry, your account isn't enabled. Please contact us."; 
      } 

      else 
      { 
        $_SESSION['memberid'] = $memberid; 
        $_SESSION['memberFirstname'] = $firstname; 
        $_SESSION['dob'] = $dob; 
        $_SESSION['sex'] = $sex; 
        $_SESSION['recordingWeight'] = $recordingWeight; 

        $arr['status'] = "success"; 
        $arr['message'] = "Logged in"; 
      } 
     } 
     else 
     { 
      $arr['status'] = "error"; 
      $arr['message'] = "Sorry, Wrong Username/Password Combination";     
     } 
header("Content-type: application/json"); 
echo json_encode($arr); 
/* close connection */ 
function md5_base64 ($data) 
{ 
    return preg_replace('/=+$/','',base64_encode(md5($data,true))); 
} 


?> 

所以這返回成功，登錄還是遺憾錯誤的用戶名/密碼組合..

這裏是我的表單代碼：

<form> 

      <fieldset> 

       <p><label style="color:white;" for="email">E-mail address</label></p> 
       <p><input type="email" id="email" value=""></p> 

       <p><label style="color:white; font" for="password">Password</label></p> 
       <p><input type="password" id="password" value=""></p> 

       <p><input type="submit" value="Sign In"></p> 

      </fieldset> 

和JS：

<script> 

     $("form").on("submit", function() { 

     var username = document.getElementById('email').value; 
     var password = document.getElementById('password').value; 

     var dataSource = new kendo.data.DataSource({ 
      transport: { 
      read: { 
      url: 'http://myurl.co.uk/appqueries/login.php?username='+username+'&password='+password, 
      dataType: "json" 
      } 
      } 
     }); 

     //alert("Your username is "+username+" and your password is: "+password); 

     }); 
    </script> 

任何人可以幫助我得到什麼了JSON的PHP文件的回報，然後讓用戶到應用程序，如果登錄成功，或者如果他們不顯示的消息。

Answer 1

我不認爲你想爲此DataSource（它可以完成，但DataSource期望讀取操作中的對象數組），除非有是附加要求。

如果這是你的HTML：

<input id='username' type='text' value='user'></input> 
<input id='password' type='text' value='password'></input> 
<button id='loginbutton'>Login</button> 
<div id='loginresult'></div> 

然後你可以使用jQuery（我假設你正在使用，因爲它是劍道UI的要求）：

function loginClick() { 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    var loginUrl = 'http://myurl.co.uk/appqueries/login.php?username='+username+'&password='+password; 

    $.ajax({ 
     url: loginUrl, 
     type: 'GET', 
     dataType: 'json', 
     success: function (data) { 
      handleLoginResult(data); 
     } 
    }); 
} 

$(document).on("click", "#loginbutton", loginClick); 

function handleLoginResult(data) { 
    var status = data.status; 
    var message = data.message; 

    if (status === "success") { 
     // do whatever needs to be done after successful login 
     $("#loginresult").html(message); 
    } 
} 

看到一個工作示例這裏（有一些差異，因爲這是使用jsfiddle的回聲api）：http://jsfiddle.net/lhoeppner/9TGJd/

這對於劍道移動幾乎相同，除了你會使用移動按鈕和th e數據點擊綁定：

<a id="loginbutton" data-role="button" data-click="loginClick">Login!</a> 

Answer 2

您不應該在Kendo Mobile應用程序中使用表單提交，因爲Kendo移動應用程序基本上是單頁應用程序。你需要做的是有一個Kendo按鈕，並在點擊事件處理程序中，觸發JSON調用。你可以在這裏看到Kendo Button的點擊事件演示：http://demos.kendoui.com/mobile/button/events.html#/