最近在弄一个网页的问题，总结如下。
【问题描述】
页面中包括以下几个部分：1）表单form，供用户输入图片文件；2）iframe1，显示a.php文件的内容，a.php接收客户端图片并保存，后台程序处理图片，生成相关数据文件；3）iframe2，显示b.php文件的内容，b.php读取结果文件对其进行分页显示；
【实现思路】
以上功能主要在于两个问题：
1，form表单提交的形式一般是：input type="sumit"的表单元素配合form的action地址完成提交。此处要求先用a.php处理，在a.php处理完成后用b.php进行后续处理，如果使用JavaScript修改form的target和action进行两次提交，前后顺序得不到保证。思路是：form表单提交至a.php，在a.php的文件中使用document.ready事件，通过DOM元素访问方式：parent.document.getElementById(id)访问到iframe2控件，设置其src属性值为b.php即可保证处理顺序；
2，在iframe2中进行分页显示b.php的内容：思路是b.php中使用ajax异步请求显示数据，编写c.php文件接收请求的页数，然后读取文件数据以jason形式将列表传送给b.php，由b.php对数进行HTML标签包装；
【实现的详细代码】
- 前端显示页面：
<form id="form" name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file" accept="image/*" onchange="preview();"/> </form> <iframe name="hidden_frame1" id="hidden_frame" frameborder="0"></iframe>
<iframe name="hidden_frame2" id="hidden_frame1"frameborder="0"></iframe>
function preview() {
var form = document.getElementById("form");
form.target="hidden_frame1";
form.action="a.php";
form.submit();
}
- a.php后台处理页面
<html> <head> <meta charset="gbk"> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <script> $(document).ready(function() { var iframeSearch=parent.document.getElementById("hidden_frame2"); iframeSearch.src="b.php"; }); </script> <div> <!--其他页面内容--> </div> </body> </html>
- b.php后台处理页面
<html> <head> <style type="text/css"> #list{width:680px; height:530px; margin:50px auto 2px auto; position:relative} #list ul li{ float:left;width:220px; height:260px; margin:2px} #list ul li img{width:220px; height:220px} #list ul li p{line-height:22px} #pagecount{width:500px; margin:10px auto 2px auto; padding-bottom:20px; text-align:center} #pagecount span{margin:4px; font-size:14px} #list ul li#loading{width:120px; height:32px; line-height:32px; border:1px solid #d3d3d3; position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var curPage = 1; //当前页码 var total,pageSize,totalPage; //获取数据 function getData(page){ $.ajax({ type: 'POST', url: 'pages.php', data: {'pageNum':page-1}, dataType:'json', beforeSend:function(){ $("#list ul").append("<li id='loading'>loading...</li>"); }, success:function(json){ $("#list ul").empty(); total = json.total; //总记录数 pageSize = json.pageSize; //每页显示条数 curPage = page; //当前页 totalPage = json.totalPage; //总页数 var li = ""; var list = json.list; $.each(list,function(index,array){ //遍历json数据列 li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title']+"</a></li>"; }); $("#list ul").append(li); }, complete:function(){ //生成分页条 getPageBar(); }, error:function(){ alert("数据加载失败"); } }); } //获取分页条 function getPageBar(){ //页码大于最大页数 if(curPage>totalPage) curPage=totalPage; //页码小于1 if(curPage<1) curPage=1; pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>"; //如果是第一页 if(curPage==1){ pageStr += "<span>首页</span><span>上一页</span>"; }else{ pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"; } //如果是最后页 if(curPage>=totalPage){ pageStr += "<span>下一页</span><span>尾页</span>"; }else{ pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>"; } $("#pagecount").html(pageStr); } $(function(){ getData(1); $(document).on("click", "#pagecount span a", function() { var rel=$(this).attr("rel"); if(rel) getData(rel); }); }); </script> </head> <body> <div id="main"> <div id="list"> <ul></ul> </div> <div id="pagecount"></div> </div> </body> </html>
- pages.php页面传送json数据
<?php include_once('connect.php'); $page = intval($_POST['pageNum']); $result = mysql_query("select id from food"); $total = mysql_num_rows($result);//总记录数 $pageSize = 6; //每页显示数 $totalPage = ceil($total/$pageSize); //总页数 $startPage = $page*$pageSize; $arr['total'] = $total; $arr['pageSize'] = $pageSize; $arr['totalPage'] = $totalPage; $query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize"); while($row=mysql_fetch_array($query)){ $arr['list'][] = array( 'id' => $row['id'], 'title' => $row['title'], 'pic' => $row['pic'], ); } //print_r($arr); echo json_encode($arr); ?>
注：分页显示过程参考：http://www.daimajiayuan.com/sitejs-17717-1.html