首頁 > 開發者 > JavaScript

HTML無重新整理提交表單

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通常對於無重新整理提交表單，我們都是運用ajax實現的。前段時間跟著老大瞭解到另一種無重新整理提交表單的方法，是利用iframe架構實現的。現在整理出來分享給大家。

第一種：

（html頁面）

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>無重新整理提交表單</title>    <style type="text/css">        ul{ list-style-type:none;}    </style></head><body>    <iframe name="formsubmit" style="display:none;">    </iframe>    
    <!-- 將form表單提交的視窗指向隱藏的ifrmae,並通過ifrmae提交資料。 -->    <form action="form.php" method="POST" name="formphp" target="formsubmit">       <ul>            <li>                <label for="uname">使用者名稱：</label>                <input type="text" name="uname" id="uname" />            </li>            <li>                <label for="pwd">密  碼：</label>                <input type="password" name="pwd" id="pwd" />            </li>            <li>                <input type="submit" value="登入" />            </li>       </ul>    </form></body></html>

（PHP頁面：form.php）

<?php  //非空驗證  if(empty($_POST['uname']) || empty($_POST['pwd']))  {    echo '<script type="text/javascript">alert("使用者名稱或密碼為空白!");</script>';    exit;  }    //驗證密碼  if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')  {    echo '<script type="text/javascript">alert("使用者名稱或密碼不正確!");</script>';    exit;  } else {    echo '<script type="text/javascript">alert("登入成功!");</script>';    exit;  }

 

第二種：

（html頁面）

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>iframe提交表單</title></head><body>    <iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>    <form action="form.php" target="myiframe" method="POST">      使用者名稱:<input type="text" name="username" /><br/>      密 碼:<input type="password" name="userpwd" /><br/>            <input type="submit" value="登入" />    </form>        <script type="text/javascript">     function iframeLoad(iframe){        var doc = iframe.contentWindow.document;        var html = doc.body.innerHTML;        if(html != ''){          //將擷取到的json資料轉為json對象          var obj = eval("("+html+")");          //判斷返回的狀態          if(obj.status < 1){            alert(obj.msg);          }else{            alert(obj.msg);            window.location.href="http://www.baidu.com";          }        }     }    </script></body></html>

（PHP頁面：form.php）

<?php  //設定時區  date_default_timezone_set('PRC');  /*    返回的提交訊息    status:狀態    msg:提示資訊  */  $msg = array('status'=>0,'msg'=>'');    //擷取提交過來的資料  $name = $_POST['username'];  $pwd = $_POST['userpwd'];    //類比登入驗證  $user = array();  $user['name'] = 'jack';  $user['pwd'] = 'jack2014';    if($name != $user['name']){    $msg['msg'] = '該使用者未註冊!';    $str = json_encode($msg);    echo $str;    exit;  }else if($pwd != $user['pwd']){    $msg['msg'] = '輸入的密碼錯誤!';    $str = json_encode($msg);    echo $str;    exit;  }    $msg['msg'] = '登入成功!';  $msg['status'] = 1;  $str = json_encode($msg);  echo $str;

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More