52,782
社区成员
发帖
与我相关
我的任务
分享请教一个AJAX调用PHP变量在HTML上显示的问题
新手初来乍到，多多包涵！问题是这样的：
a.html有个表单，a.js负责对a.html表单进行异步验证，若验证没有问题，提交表单后a.js中的submit()会把所有表单数据送到1.php文件插入数据库，并将提交表单的用户当月提交的所有记录返回到a.html以便查看。在返回的每条记录后都会有个“查看详情”的链接，根据$type变量查看，查看详情的结果会在一个弹出窗口b.html中显示。
为了在b.html（b.js负责控制b.html的DOM）中显示数据，需要把1.php中的$id和$type两个变量发送到2.php中进行select查询。
在1.php中，$id是通过$_SESSION['id']=$id传送，$type是通过一个链接<a href="2.php?type=$type">点击</a>进行传输。
在2.php中，我通过$id=$_SESSION['id']和$type=$_GET['type']来接收。
现在问题来了，若我直接在浏览器地址栏中打上1.php，然后点击“查看详情”跳到2.php后，$id和$type都能正常显示，但在a.html页面中单击由1.php返回的“查看详情”跳到b.html后，只能显示$id的内容，$type却无法显示出来。
现在对这个问题很迷茫，非常感谢各位的赐教！
a.html有个表单，a.js负责对a.html表单进行异步验证，若验证没有问题，提交表单后a.js中的submit()会把所有表单数据送到1.php文件插入数据库，并将提交表单的用户当月提交的所有记录返回到a.html以便查看。在返回的每条记录后都会有个“查看详情”的链接，根据$type变量查看，查看详情的结果会在一个弹出窗口b.html中显示。
为了在b.html（b.js负责控制b.html的DOM）中显示数据，需要把1.php中的$id和$type两个变量发送到2.php中进行select查询。
在1.php中，$id是通过$_SESSION['id']=$id传送，$type是通过一个链接<a href="2.php?type=$type">点击</a>进行传输。
在2.php中，我通过$id=$_SESSION['id']和$type=$_GET['type']来接收。
现在问题来了，若我直接在浏览器地址栏中打上1.php，然后点击“查看详情”跳到2.php后，$id和$type都能正常显示，但在a.html页面中单击由1.php返回的“查看详情”跳到b.html后，只能显示$id的内容，$type却无法显示出来。
现在对这个问题很迷茫，非常感谢各位的赐教！
...全文
请发表友善的回复…
发表回复
mmazu 2012-03-09
- 打赏
- 举报
掉下来了，还是顶一下。
刚才做了个测试，还是不行，我把测试代码放上来：
有两个数据表：
test_select:
type_id type_name
1 type1
2 type2
test_select_value:
rec_id rec_type rec_value
1 1 100
2 1 200
3 2 300
4 2 400
a.html的代码：(因为是测试，所以不做表单了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhmtl1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<menta http-equiv="Content-Type" content="test/html;charset=UTF-8" />
<title>Test Select</title>
<script src="utils.js" type="text/javascript"></script>
<script src="a.js" type="text/javascript"></script>
</head>
<body>
<div id="result">
</div>
</body>
</html>
a.js代码：
window.onload=initPage;
function initPage() {
showResult();
}
function showResult(){
showRequest=createRequest();
if(showRequest==null) {
alert("createRequest failed!");
}else{
var url="1.php";
showRequest.open("GET",url,true);
showRequest.onreadystatechange=showTable;
showRequest.setRequestHeader("Content-Type","application/x-www-urlencoded");
showRequest.send(null);
}
}
function showTable() {
if(showRequest.readyState==4){
if(showRequest.status==200) {
document.getElementById("result").innerHTML=showRequest.responseText;
}
}
}
function showDetails(){
var detailURL='b.html';
var detailWindow=window.open(detailURL,"Details","width=600;height=400");
detailWindow.focus();
return false;
}
1.php代码：
<?php
session_start();
require 'db.inc.php';
$db=mysql_connect(MYSQL_HOST,MYSQL_USER,MYSQL_PASSWORD);
mysql_select_db(MYSQL_DB,$db);
echo '<table><tr><td>Type</td>';
echo '<td>Sum Value</td>';
echo '<td>Option</td</tr>';
$q='select rec_type,ts.type_name type_name,sum(rec_value) sum_value
from
test_select_value tsv left join test_select ts on tsv.rec_type=ts.id group by rec_type';
$r=mysql_query($q,$db);
while($row=mysql_fetch_object($r)){
echo '<tr><td>'.$row->type_name.'</td>';
echo '<td>'.$row->sum_value.'</td>';
echo '<td><a onclick="javascript:showDetails();return false;" href="2.php?typeid='.$row->rec_type.'&typename='.$row->type_name.'">Details</a></td></tr>';
}
echo '</table>';
?>
最后a.html上显示如下内容：
Type Sum Value Option
select1 300.00 Details
select2 700.00 Details
刚才做了个测试，还是不行，我把测试代码放上来：
有两个数据表：
test_select:
type_id type_name
1 type1
2 type2
test_select_value:
rec_id rec_type rec_value
1 1 100
2 1 200
3 2 300
4 2 400
a.html的代码：(因为是测试，所以不做表单了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhmtl1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<menta http-equiv="Content-Type" content="test/html;charset=UTF-8" />
<title>Test Select</title>
<script src="utils.js" type="text/javascript"></script>
<script src="a.js" type="text/javascript"></script>
</head>
<body>
<div id="result">
</div>
</body>
</html>
a.js代码：
window.onload=initPage;
function initPage() {
showResult();
}
function showResult(){
showRequest=createRequest();
if(showRequest==null) {
alert("createRequest failed!");
}else{
var url="1.php";
showRequest.open("GET",url,true);
showRequest.onreadystatechange=showTable;
showRequest.setRequestHeader("Content-Type","application/x-www-urlencoded");
showRequest.send(null);
}
}
function showTable() {
if(showRequest.readyState==4){
if(showRequest.status==200) {
document.getElementById("result").innerHTML=showRequest.responseText;
}
}
}
function showDetails(){
var detailURL='b.html';
var detailWindow=window.open(detailURL,"Details","width=600;height=400");
detailWindow.focus();
return false;
}
1.php代码：
<?php
session_start();
require 'db.inc.php';
$db=mysql_connect(MYSQL_HOST,MYSQL_USER,MYSQL_PASSWORD);
mysql_select_db(MYSQL_DB,$db);
echo '<table><tr><td>Type</td>';
echo '<td>Sum Value</td>';
echo '<td>Option</td</tr>';
$q='select rec_type,ts.type_name type_name,sum(rec_value) sum_value
from
test_select_value tsv left join test_select ts on tsv.rec_type=ts.id group by rec_type';
$r=mysql_query($q,$db);
while($row=mysql_fetch_object($r)){
echo '<tr><td>'.$row->type_name.'</td>';
echo '<td>'.$row->sum_value.'</td>';
echo '<td><a onclick="javascript:showDetails();return false;" href="2.php?typeid='.$row->rec_type.'&typename='.$row->type_name.'">Details</a></td></tr>';
}
echo '</table>';
?>
最后a.html上显示如下内容：
Type Sum Value Option
select1 300.00 Details
select2 700.00 Details
mmazu 2012-03-08
- 打赏
- 举报
另外补充一下，firebug没有任何错误警告
mmazu 2012-03-08
- 打赏
- 举报
谢谢KongHuLu回复。怪我前面没说清楚，id表示用户id而不是记录id。比如说一条记录的字段是recId(记录id)，recDate（记录发生的日期），type（类型），value(值)和uid（用户id，就是我问题中所讲的id）
在a.html中只显示根据type的value汇总，比如type1有3条，type有2条，a.html中只有两行，若我单击type1后面的“查看详情”后，会跳出b.html，该页面会显示出三条记录。而这些记录的数据库查询工作分别交给1.php和2.php。在1.php中（为防误解，我把问题中说的$id换成$uid），$uid来自于之前的php页面，用session传递（$uid=$_SESSION['uid']）；而$type则来自于a.html的表单，有a.js从表单中获取值后提交给1.php($type=$_REQUEST['type'])。当1.php把值插入数据库后再把整个表的信息反馈给a.html。
在1.php结束前我用$_SESSION['uid']=$uid把本页的值传递给下个页面，而$type则在1.php中做了链接<a href="2.php?type=$type">。
在2.php中我通过$uid=$_SESSION['uid']和$type=$_GET['type']来获取1.php传递的值。
如果我在浏览器中（我在ubuntu下用gedit开发，然后用firebug来调试，同时也会在windows下用ie，safari和chrome来调试兼容性）直接键入1.php,然后点击“查看详情”的话，2.php上能同时返回$uid和$type；但用a.html的话，弹出的b.html只显示$uid。在php中我是用echo回调，在js中我是用show.innerHTML=request.responseText来调用到html页面。
谢谢
在a.html中只显示根据type的value汇总，比如type1有3条，type有2条，a.html中只有两行，若我单击type1后面的“查看详情”后，会跳出b.html，该页面会显示出三条记录。而这些记录的数据库查询工作分别交给1.php和2.php。在1.php中（为防误解，我把问题中说的$id换成$uid），$uid来自于之前的php页面，用session传递（$uid=$_SESSION['uid']）；而$type则来自于a.html的表单，有a.js从表单中获取值后提交给1.php($type=$_REQUEST['type'])。当1.php把值插入数据库后再把整个表的信息反馈给a.html。
在1.php结束前我用$_SESSION['uid']=$uid把本页的值传递给下个页面，而$type则在1.php中做了链接<a href="2.php?type=$type">。
在2.php中我通过$uid=$_SESSION['uid']和$type=$_GET['type']来获取1.php传递的值。
如果我在浏览器中（我在ubuntu下用gedit开发，然后用firebug来调试，同时也会在windows下用ie，safari和chrome来调试兼容性）直接键入1.php,然后点击“查看详情”的话，2.php上能同时返回$uid和$type；但用a.html的话，弹出的b.html只显示$uid。在php中我是用echo回调，在js中我是用show.innerHTML=request.responseText来调用到html页面。
谢谢
潮起潮落 2012-03-08
- 打赏
- 举报
以下为我的理解，若有描述不清的你再说一下
id为“用户当月提交的所有记录”中每一条记录的唯一标识，$type不管是针对单条记录的还是针对所有记录的。
在你从1.php获得，填充金a.html的DOM中构造“查看详情”这个链接时，完全可以把id和type都拼进去，a href="2.php?id=1&type=xx"
如果你使用chrome或者firefox浏览器，打开网页，按下F12。
看一下你所说的两种情况下，“查看详情”这个链接的href是否有所不同呢
id为“用户当月提交的所有记录”中每一条记录的唯一标识，$type不管是针对单条记录的还是针对所有记录的。
在你从1.php获得，填充金a.html的DOM中构造“查看详情”这个链接时，完全可以把id和type都拼进去，a href="2.php?id=1&type=xx"
如果你使用chrome或者firefox浏览器，打开网页，按下F12。
看一下你所说的两种情况下，“查看详情”这个链接的href是否有所不同呢
