jQuery Mobile：将数据从一个页面发送到另一个页面

我有一个问题，我需要将数据（一个id）从列表发送到另一个页面。 这是html代码：

  
 
 
Players App
 
 
 
 
 
 
 
Players list
 
 
 
 
 
Player detail
 
 
 
 
 
 
 
Players list
 
 
   

这是脚本：

 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("
"+oggetto.getCognome()+"
").listview("refresh"); }); } squadraManager.init = function(){ /*init */ squadraManager.initArray(); squadraManager.loaderList(); } jQuery(function(){ squadraManager.init(); }); 

我需要将点击列表的ID发送到下一页。 最后的想法是在第二页“#detail”中加载播放器的细节（播放器在一个单独的类中）。

谢谢你的回复

Answer 1

一个HTML /多页面模板

以下是将一个属性从listview传递到1 html多页面模板中的第二页的示例：

http://jsfiddle.net/Gajotres/Gv7UW/ – js对象作为存储容器

http://jsfiddle.net/Gajotres/J9NTr/ – localStorage作为存储容器

基本上你想要做的是为存储目的创建一个持久的javascript对象。 由于ajax用于页面加载（并且页面不以任何方式重新加载），该对象将保持活动状态。

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

多个HTML页面模板

不幸的是这个例子不能通过jsFiddle完成，所以我将发布所需的文件：

HTML 1：

            
 
 
 First Page 
 Next 
 
 
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
Link 5
 
 
 
 
 
   

HTML 2：

           
 
 
 Second Page 
 Back 
 
 
 
 
 
   

operations.js：

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

用户认证演示

使用jsFiddle示例无法显示的另一个示例，与之前的示例不同，此示例将附加SQL脚本。 我建议你创建一个更好的数据库读取逻辑，这个是一个简单的解决方案，容易出现SQL注入，但它适用于你的任务：

index.php：

             
 
 
Login Page
 
 
 Enter your username:  Enter your password:  Login 
 
 
 
 
 
 
 
 
 Here goes content 
 
 
Page footer
 
 
   

json.php：

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

更多信息

如果您想了解有关此主题的更多信息，请查看本文 。 您将找到几个带有示例的解决方案。