jQuery Mobile：将数据从一个页面发送到另一个页面
Posted
技术标签:
【中文标题】jQuery Mobile：将数据从一个页面发送到另一个页面【英文标题】：jQuery Mobile: Sending data from one page to the another 【发布时间】：2013-01-24 10:39:42 【问题描述】：我有一个问题，我需要将数据（一个 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();
);
我需要将点击列表的 id 发送到下一页。 最后的想法是在第二页“#detail”中加载播放器的详细信息（播放器在一个单独的类中）。
感谢回复
【问题讨论】：
【参考方案1】：一个 HTML / 多页模板
这是一个在 1 html 多页模板中将属性从 listview 传递到第二页的示例：
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 脚本。我会建议你创建一个更好的数据库读取逻辑，这是一个简单的解决方案，容易发生 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 */;
更多信息
如果您想了解有关此主题的更多信息，请查看此article。您会发现几个带有示例的解决方案。
【讨论】：
Tnks，你的回答很及时。 @Gajo ：简而言之，在您的 localStorage as storage version 中，指向不同页面的按钮会触发将 localStorage 设置为新值的功能。亲爱的，我会重复使用它：]以上是关于jQuery Mobile：将数据从一个页面发送到另一个页面的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile：获取通过 changePage 传递给页面的数据