Javascript JQuery Mobile和Cordova页面模板_Javascript_Json_Jquery Mobile_Cordova

Javascript JQuery Mobile和Cordova页面模板

javascript json jquery-mobile cordova

Javascript JQuery Mobile和Cordova页面模板,javascript,json,jquery-mobile,cordova,Javascript,Json,Jquery Mobile,Cordova,我的任务是为我们的中型学校董事会创建一个移动应用程序来宣传我们的学校。起初，这看起来很简单——我抓起Cordova和Eclipse，扔进jQuery移动库，为我的第一所学校设置了几页（我想总共5页）。复制/粘贴/编辑其他17的内容/更新链接然后，我的老板说：“用每所学校的颜色制作网页。”。再说一次，简单的豌豆。后来上了几堂CSS课，所有大约一百页的页面都很漂亮，与学校相匹配然后是爆炸性的消息。到目前为止，所有的数据都是本地的.htm文件，这些文件将与应用程序一起安装，当用户单击它们时，应用程

我的任务是为我们的中型学校董事会创建一个移动应用程序来宣传我们的学校。起初，这看起来很简单——我抓起Cordova和Eclipse，扔进jQuery移动库，为我的第一所学校设置了几页（我想总共5页）。复制/粘贴/编辑其他17的内容/更新链接

然后，我的老板说：“用每所学校的颜色制作网页。”。再说一次，简单的豌豆。后来上了几堂CSS课，所有大约一百页的页面都很漂亮，与学校相匹配

然后是爆炸性的消息。到目前为止，所有的数据都是本地的.htm文件，这些文件将与应用程序一起安装，当用户单击它们时，应用程序就会加载它们：不需要数据连接。今天早上，有人问我，我们是否可以在不更新应用程序的情况下动态更改信息。一、沉默但诚实地说“不”-你可以猜到下一个请求是什么

所以，我需要一个方法来实现这一点。我现在的想法是在服务器端运行一些东西，接收某种类型的id号（appdata.schoolbord.web/123），然后返回一个包含数据的JSON对象——可能是一个标题，一个页面模板的名称（这样我就可以将93个页面缩减为几个页面）、一些CSS（只是为了停止下一个请求）然后将数据滑入模板

使用Cordova和jQuery Mobile有没有一种简单的方法可以做到这一点？任何方向的指针都很好。谢谢。

这里有一个简单的例子。我已经创建了一个jQM登录页面，您需要输入用户名和密码。此数据将用于检查数据库中是否存在用户名，如果存在，则返回true，否则返回false。我建议您创建一个更好的db读取逻辑，这是一个简单的解决方案，易于SQL注入，但它对您的任务很有效

index.php:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        #login-button {
            margin-top: 30px;
        }        
    </style>
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/custom.js"></script>
</head>
<body>
    <div data-role="page" id="login">
        <div data-theme="a" data-role="header">
            <h3>Login Page</h3>
        </div>

        <div data-role="content">
            <label for="username">Enter your username:</label>
            <input type="text" value="" name="username" id="username"/>
            <label for="password">Enter your password:</label>
            <input type="password" value="" name="password" id="password"/>  
            <a data-role="button" id="login-button" data-theme="b">Login</a>
        </div>

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

        </div>
    </div>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3></h3>
        </div>

        <div data-role="content">
            Here goes content
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>Page footer</h3>
        </div>
    </div>    
</body>
</html>

<?php
    $var1 = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature
    $jsonObject = json_decode($_REQUEST['outputJSON']); // Decode JSON object into readable PHP object

    $username = $jsonObject->{'username'}; // Get username from object
    $password = $jsonObject->{'password'}; // Get password from object

    mysql_connect("localhost","root","");  // Conect to mysql, first parameter is location, second is mysql username and a third one is a mysql password
    @mysql_select_db("test") or die( "Unable to select database"); // Connect to database called test

    $query = "SELECT * FROM users WHERE user_name = '".$username."' and user_pass = '".$password."'";
    $result=mysql_query($query);
    $num = mysql_numrows($result);

    if($num != 0) {
        echo "true";
    } else {
        echo "false";        
    }
?>

如果您愿意，请通过我的电子邮件与我联系（您可以在ma profile中找到），我将向您发送带有源代码和使用过的sql脚本的项目。

您使用的是哪种服务器端技术？服务器是Redhat上的标准灯堆栈。这不是我真正想要的-我可以接触到服务器并毫无问题地获取数据。。。我在客户端做模板时遇到了更多的问题。

$(document).on('pagebeforeshow', '#login', function(){ 
    $('#login-button').on('click', function(){
        if($('#username').val().length > 0 && $('#password').val().length > 0){
            userObject.username = $('#username').val(); // Put username into the object
            userObject.password = $('#password').val(); // Put password into the object
            // Convert an userObject to a JSON string representation
            var outputJSON = JSON.stringify(userObject);
            // Send data to server through ajax call
            // action is functionality we want to call and outputJSON is our data
            ajax.sendRequest({action : 'login', outputJSON : outputJSON});
        } else {
            alert('Please fill all nececery fields');
        }
    });    
});

$(document).on('pagebeforeshow', '#index', function(){ 
    if(userObject.username.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page
        $.mobile.changePage( "#login", { transition: "slide"} ); // In case result is true change page to Index  
    }
    $(this).find('[data-role="header"] h3').append('Wellcome ' + userObject.username); // Change header with wellcome msg
    //$("#index").trigger('pagecreate');
});

// This will be an ajax function set
var ajax = {
    sendRequest:function(save_data){
        $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
            data: save_data,
            async: true,
            beforeSend: function() {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                if(result == "true") {
                    $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
                } else {
                    alert('Login unsuccessful, please try again!'); // In case result is false throw an error
                }
                // This callback function will trigger on successful action
            },
            error: function (request,error) {
                // This callback function will trigger on unsuccessful action                
                alert('Network error has occurred please try again!');
            }
        });
    }
}

// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
    username : "",
    password : ""
}