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#/