如何使用ajax和json登錄hibrid移動應用程序

我是新手編碼器。對於我的項目，我正在嘗試使用json和ajax爲移動網絡創建登錄表單。我試圖通過我自己測試教程here中的代碼。如何使用ajax和json登錄hibrid移動應用程序

，這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>JQM Demo Login</title> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" /> 
    <link rel="stylesheet" type="text/css" href="libs/jquery.mobile-1.4.3.min.css" /> 
    <script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="libs/jquery.mobile-1.4.3.min.js"></script> 
    <script type="text/javascript" src="js/login.js"></script> 
</head> 
<body> 
    <div data-role="page" id="login"> 
     <div data-role="header"> 
      <h3>Login Page</h3> 
     </div> 

     <div data-role="content"> 
      <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false"> 
       <fieldset> 
        <div data-role="fieldcontain"> 
         <label for="username">Username</label> 
         <input type="text" value="" name="username" id="username" class="ui-theme-b" /> 
        </div> 
        <div data-role="fieldcontain"> 
         <label for="username">Password</label> 
         <input type="password" value="" name="password" id="password" class="ui-theme-b" /> 
        </div> 
        <input type="button" data-theme="b" name="submit" id="submit" value="Login"> 
       </fieldset> 
      </form> 
     </div> 

     <div data-role="footer" data-position="fixed"> 

     </div> 
    </div> 

    <div data-role="page" id="second"> 
     <div data-role="header"> 
      <h3>Welcome Page</h3> 
     </div> 

     <div data-role="content"> 

     </div> 
    </div> 
</body> 
</html>

使用javascript：

$(document).on('pageinit', '#login', function() { 
    $(document).on('click', '#submit', function() { 
     if ($('#username').val().length > 0 && $('#password').val().length > 0) { 
      $.ajax({ 
       url: 'check.php', 
       data: {action: 'login', formData: $('#check-user').serialize()}, 
       type: 'post', 
       async: 'true', 
       dataType: 'json', 
       beforeSend: function() { 
        $.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible:true}); 
       }, 
       complete: function() { 
        $.mobile.loading('hide'); 
       }, 
       success: function(result) { 
        if (result.status) { 
         user.name = result.message; 
         $.mobile.changePage('#second'); 
        } else { 
         alert('logon unsuccessful!'); 
        } 
       }, 
       error: function(request,error) { 
        alert('Network error has accurred please try again!'); 
       } 
      }); 
     } else { 
      alert('Please fill all necessary fields!'); 
     } 
     return false; 
    }); 
}); 

$(document).on('pagebeforeshow', '#second', function() { 
    $.mobile.activePage.find('.ui-content').html('Welcome' + user.name); 
}); 

var user = {name : null};

它引導所述數據與阿賈克斯在本地主機相同服務器check.php。

<?php 
    $action = $_POST['action']; 

    parse_str($_POST['formData'], $output); 

    $username = $output['username']; 
    $password = $output['password']; 

    $output = array('status' => true, 'message' => $username); 
    echo json_encode($output); 

?>

在教程'example'提供的鏈接中，代碼工作正常。但是對於我來說，當我嘗試實現相同的功能時，我遇到了錯誤。

發生網絡錯誤，請重試！

誰能告訴我我的代碼有什麼問題嗎？以及如何使其成功，如果用戶名和密碼與MySQL數據庫驗證？

來源

2015-06-22 Mahfud Muhammad

我現在修好了。但是，在第二頁中，結果是「welcome undefined」。我認爲結果user.name不包含用戶名。任何人都可以告訴我任何問題的細節，以及如何解決它？ –

你的JS代碼看起來不錯，我建議你爲調試目的顯示「錯誤」。在錯誤方法中嘗試console.log（錯誤）。

不管怎麼說，可能的原因可能是：

通過check.php返回的數據是不是在JSON。所以如果你返回「YES」或「1」等，那麼確保它是JSON格式。
SQL查詢中存在一些異常/錯誤。因此您正在獲得自定義消息。

來源

2015-06-22 07:41:35

那麼，有沒有一些方法可以製作json格式的返回內容？順便說一句，它不與數據庫SQL同步。 –

如何使用ajax和json登錄hibrid移動應用程序

回答

相關問題