jQuery Mobile: Sending data from one page to the another

后端 未结 1 356
臣服心动
臣服心动 2020-11-30 09:28

i have a problem, i need to send data (an id) from a list to another page. this is the html code:


    
        
相关标签:
1条回答
  • 2020-11-30 10:14

    One HTML / multiple pages template

    Here's an example of passing an attribute from listview to the second page in 1 html multi page template:

    http://jsfiddle.net/Gajotres/Gv7UW/ - js object as a storage container

    http://jsfiddle.net/Gajotres/J9NTr/ - localStorage as a storage container

    Basically what you want to do is create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.

        var storeObject = {
            firstname : '',
            lastname : ''
        }
    

    Multiple HTML pages template

    Unfortunately this example can't be done through jsFiddle so I will post needed files:

    HTML 1 :

    <!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" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
        <script src="operations.js"></script>       
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>
    
            <div data-role="content">
                <ul data-role="listview" data-theme="a" id="test-listview">
                    <li><a href="page2.html?id=1">Link 1</a></li>
                    <li><a href="page2.html?id=2">Link 2</a></li>
                    <li><a href="page2.html?id=3">Link 3</a></li>
                    <li><a href="page2.html?id=4">Link 4</a></li>
                    <li><a href="page2.html?id=5">Link 5</a></li>
                </ul>    
            </div>
    
            <div data-theme="a" data-role="footer" data-position="fixed">
    
            </div>
        </div>    
    </body>
    </html>   
    

    HTML 2 :

    <!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" />
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    </head>
    <body>
        <div data-role="page" id="second">
            <div data-theme="a" data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>
    
            <div data-role="content">
    
            </div>
    
            <div data-theme="a" data-role="footer" data-position="fixed">
    
            </div>
        </div>    
    </body>
    </html>   
    

    operations.js :

    $(document).on('pageshow', '#second', function(){   
        alert(getParameterByName("id"));
    }); 
         
    
    function getParameterByName(name) {
        return decodeURI(
            (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
        );
    }
    

    User authentication demo

    Another example that can't be shown with a jsFiddle example, unlike previous one, this one will have attached SQL script. I would advise you to create a better db reading logic, this one is a simple solution, prone to SQL injection, but it will work well for your assignment:

    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>
    

    json.php :

    <?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";        
        }
    ?>
    

    custom.js :

    $(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 : ""
    }
    

    localhost.sql :

    -- phpMyAdmin SQL Dump
    -- version 3.4.10.1
    -- http://www.phpmyadmin.net
    --
    -- Host: localhost
    -- Generation Time: Feb 02, 2013 at 11:58 AM
    -- Server version: 5.5.20
    -- PHP Version: 5.3.10
    
    SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
    SET time_zone = "+00:00";
    
    
    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;
    
    --
    -- Database: `test`
    --
    CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
    USE `test`;
    
    -- --------------------------------------------------------
    
    --
    -- Table structure for table `users`
    --
    
    CREATE TABLE IF NOT EXISTS `users` (
      `user_id` int(11) NOT NULL AUTO_INCREMENT,
      `user_name` varchar(64) NOT NULL,
      `user_pass` varchar(64) NOT NULL,
      PRIMARY KEY (`user_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
    
    --
    -- Dumping data for table `users`
    --
    
    INSERT INTO `users` (`user_id`, `user_name`, `user_pass`) VALUES
    (1, 'gajotres', 'testpass');
    
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
    

    More info

    If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

    0 讨论(0)
提交回复
热议问题