jQuery Mobile: отправка данных с одной страницы на другую

У меня проблема, мне нужно отправить данные (id) из списка на другую страницу. это html-код:

</head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>Players App</h1> </div><!--/header--> <div data-role="content"> <ul data-role="listview" id="ul_list" data-inset="true"> </ul> </div><!--/content--> <div data-role="footer"> <h4>Players list</h4> </div><!--/footer--> </div><!--/page-index--> <div data-role="page" id="detail" data-add-back-btn="true"> <div data-role="header"> <h1>Player detail</h1> </div><!--/header--> <div data-role="content"> <ul data-role="listview" id = "" data-inset="true"> </ul> </div><!--/content--> <div data-role="footer"> <h4>Players list</h4> </div><!--/footer--> </div><!--/page-detail--> </body> </html>

и это сценарий:

 var lista = new Array(); var squadraManager={}; squadraManager.initArray=null; squadraManager.printArray=null; squadraManager.initArray = function(){ lista[0] = new players(); lista[0].setNome("Nonho"); lista[0].setRuolo("difensore"); lista[0].setCognome("Rossi"); lista[0].setNMaglia("01"); lista[1] = new players(); lista[1].setNome("Marco"); lista[1].setRuolo("blabla"); lista[1].setCognome("Mariani"); lista[1].setNMaglia("22"); lista[2] = new players(); lista[2].setNome("Carlo"); lista[2].setRuolo("Soffiatore"); lista[2].setCognome("Bianchi"); lista[2].setNMaglia("01"); } squadraManager.loaderList = function(){ jQuery.each( lista, function(chiave, oggetto){ //leggo valori oggetti in array jQuery("#ul_list").append("<li><a id='"+ oggetto.getId() +"det' href='#dettaglio'>"+oggetto.getCognome()+"</a></li>").listview("refresh"); }); } squadraManager.init = function(){ /*init */ squadraManager.initArray(); squadraManager.loaderList(); } jQuery(function(){ squadraManager.init(); });

i neet, чтобы отправить идентификатор щелкнутого списка на следующую страницу. последняя идея заключается в загрузке на второй странице «#detail» детали игрока (игрок находится в отдельном классе).

Спасибо за ответ

Один шаблон HTML / несколько страниц

Ниже приведен пример передачи атрибута из списка на вторую страницу в шаблоне с несколькими страницами: 1 html:

http://jsfiddle.net/Gajotres/Gv7UW/ – объект js как контейнер хранения

http://jsfiddle.net/Gajotres/J9NTr/ – localStorage в качестве контейнера для хранения

В основном, что вы хотите сделать, это создать постоянный объект javascript для целей хранения. Поскольку ajax используется для загрузки страницы (и страница не перезагружается каким-либо образом), этот объект будет оставаться активным.

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

Шаблон нескольких HTML-страниц

К сожалению, этот пример не может быть выполнен с помощью jsFiddle, поэтому я буду размещать необходимые файлы:

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>

Операции.js:

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

Демонстрация аутентификации пользователей

Другой пример, который не может быть показан с помощью примера jsFiddle, в отличие от предыдущего, будет иметь прикрепленный SQL-скрипт. Я бы посоветовал вам создать лучшую логику чтения 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>

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 */;

Больше информации

Если вы хотите узнать больше об этой теме, взгляните на эту статью . Вы найдете несколько решений с примерами.