iframe+javascriptは一つのフォーム提出後の複数の処理ファイルを順次に処理することを実現します.

41039 ワード
JavaScript
最近はホームページをいじっていますが、次のようにまとめられています.
 
【問題の説明】
ページには、ユーザーが画像ファイルを入力するためのフォームフォームフォームフォームフォームフォームフォームフォームフォームフォームがあります.2)iframe 1は、a.phpファイルの内容を表示し、a.phpはクライアント画像を受信して保存し、バックグラウンドプログラムは画像を処理し、関連データファイルを生成する.3)iframe 2は、b.phpファイルの内容を表示し、b.php読み取り結果ファイルは、ページ別に表示されます.
 
【構想の実現】
以上の機能は主に二つの問題にあります.
1、フォーム提出の形態は、一般的に、input type=「sumit」のフォーム要素がformのactionアドレスに合わせて提出されます.ここではまずa.phpで処理し、a.php処理が完了したらb.phpで後続処理を行い、JavaScriptを使ってformを修正したtargetとactionを使って二回提出して、前後の順序は保証されない.考え方は、フォームをa.phpに提出し、a.phpのファイルにdocument.readyイベントを使用して、DOM要素アクセス方式:parent.document.getElementById(id)を使ってiframe 2コントロールにアクセスし、そのsrc属性値をb.phpに設定すれば処理手順を保証できるというものである.
2,iframe 2でページ分け表示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
    call()方法、appy()方法とbind()方法を徹底的に理解しました.