写代码已经好长时间了,这几天突然纠结 “跨页面传值这个问题”!!! 这不是很简单的事嘛,没错,cookie,session,GET,POST...............好多方法。
以前也是用的这种方法。但是最近在的需求有点变化(要用js控制数据的显示,ajax发送数据到后端),之前的方法就不好使了,最终使用的解决方法是第一个。
一:JavaScript JQuery页面值传递之URL
通过URL进行传值.把要传递的信息接在URL上.
在index.html中有个<a>,点击后跳转到另外的一个页面,显示该用户的信息信息
index.html 代码如下:
<a href="index.php?con=index&act=index&uid=21" target="_blank> 修改用户信息 </a>
index.php:
<span style="font-size:14px;">
</pre><pre name="code" class="php">class indexController extends Yaf_Controller_Abstract {// 明显是Yaf嘛,没错就是Yaf ^_^
public function indexAction()
{
// ajax请求时,禁止了框架的自动渲染
$data = $this->getData();</span>
if ($data['uid']) {
$userM = new UserModel();
$userInfo = $userM->getUser($data['uid']);
if ($userInfo){
$reply['success'] = 1;
$reply['userInfo'] = $userInfo;
<span style="white-space:pre"> </span> } else {
<span style="white-space:pre"> </span>$reply['success'] = 0;
$reply['msg'] = 'Failed';
}
$this->returnData($reply);
}
//设置页面的<body id="<?php echo $bodyId;?>">
$this->getView()->assign('bodyId', 'index_index');
}
}
<span style="font-family: Arial, Helvetica, sans-serif;"></span>
点击上个页面的<a>后,跳转到下面这个页面:
<!DOCTYPE html>
<head>
<script language="javascript" >
/*
* @desc 正则匹配url,获取其中的值
*/
function getValueFromUrl(name)
{
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
} else {
return false;
}
}
var uid = getValueFromUrl(uid);
// 控制用户信息的显示
var bodyId = $("body").attr("id");
if (bodyId == 'index_index') {
$.ajax({
type : "POST",
utl : 'index.php?con=index&act=index',
data : $.toJSON({'uid' : uid}),
async : false,
dataType : 'json',
success : function (res) {
if (res.success == 1) {
var user = res.userInfo;
$(".username").val(user.username);
$(".email").val(user.email);
} else {
alert('获取信息失败');
}
}
});
}
$(".updateBtn").on('clik', function () {
//发送修改后的数据到后端
})
</script>
</head>
<body id="<?php echo $bodyId;?>">
<input class="username" type='text' value=''>
<input class="email" type='text' value=''>
<input class="updateBtn" type="button" value="修改">
</body>
</html>
优点:取值方便.可以跨域. 我最喜欢用这种方法!!!!
缺点:值长度有限制
二:JavaScript页面值传递之Window.open
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
代码如下:
<input type=text name=maintext>
<input type=button value="Open">
recive.htm
<script language="javascript" >
//window.open打开的窗口.
//利用opener指向父窗口.
var parentText = window.opener.document.all.maintext.value;
alert(parentText);
</script>
parent.html:
<!DOCTYPE html">
<body>
<input id="testval" type="hidden" value="hello" />
<a href="child.html" target="_blank">到child.html页面去</a>
<a href="javascript:alert(document.getElementById('hidden_Input').value);">显 示</a>
</body>
</html>
child.html:
<!DOCTYPE html">
<head>
<script type="text/javascript">
function setval()
{
var parent = window.parent.opener;
var testval = parent.document.getElementById('testval');
if(testval)
{
alert(testval.value);
testval.value = '子页面传过来的值';
alert('关闭这个页面回到parent.htm页面,点击显示按钮');
window.close();
}
}
</script>
<title> Hello </title>
</head>
<body>
<button οnclick="setval();">点击设置新值</button>
</body>
</html>
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系(即:利用window.open打开的窗口);不能跨域.