基于HTML實現(xiàn)表單提交后不刷新頁面
發(fā)布時間:2016-04-05 09:18:09 作者:佚名
我要評論

使用ajax實現(xiàn)表單提交無刷新頁面在項目中經(jīng)常會用到。前一段時間跟著師傅學到了另外幾種無刷新提交表單的方法,主要是基于iframe框架實現(xiàn)的?,F(xiàn)在小編整理特此分享腳本之家平臺供大家參考
使用ajax實現(xiàn)表單提交無刷新頁面在項目中經(jīng)常會用到。前一段時間跟著師傅學到了另外幾種無刷新提交表單的方法,主要是基于iframe框架實現(xiàn)的?,F(xiàn)在整理出來分享給大家。
第一種:
(html頁面)
第一種:
(html頁面)
HTML Code復制內(nèi)容到剪貼板
- <!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提交數(shù)據(jù)。 -->
- <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頁面)
HTML Code復制內(nèi)容到剪貼板
- <!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數(shù)據(jù)轉為json對象
- var obj = eval("("+html+")");
- //判斷返回的狀態(tài)
- if(obj.status < 1){
- alert(obj.msg);
- }else{
- alert(obj.msg);
- window.location.href="http://www.baidu.com";
- }
- }
- }
- </script>
- </body>
- </html>
(PHP頁面:form.php)
XML/HTML Code復制內(nèi)容到剪貼板
- <?php
- //設置時區(qū)
- date_default_timezone_set('PRC');
- /*
- 返回的提交消息
- status:狀態(tài)
- msg:提示信息
- */
- $msg = array('status'=>0,'msg'=>'');
- //獲取提交過來的數(shù)據(jù)
- $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;
以上內(nèi)容是小編給大家介紹的基于HTML實現(xiàn)表單提交后無刷新頁面的相關內(nèi)容,希望對大家有所幫助!
相關文章
- Ajax局部刷新可以通過HTML5的新特性修改browser address,下面為大家介紹下具體的實現(xiàn),希望對大家有所幫助2014-01-15
詳解HTML5之pushstate、popstate操作history,無刷新改變當前url
這篇文章主要介紹了HTML5之pushstate、popstate操作history,無刷新改變當前url的相關資料,需要的朋友可以參考下2017-03-15- 本文主要給大家分享HTML5無刷新改變當前url的代碼,需要的的朋友參考下2017-03-15
HTML5 History API 實現(xiàn)無刷新跳轉
有一次在上**網(wǎng)的時候,發(fā)現(xiàn)登陸、注冊動畫效果非常華麗,但讓我感到震驚的是頁面竟能夠實現(xiàn)無刷新跳轉,回顧了所學的前端知識,似乎沒有任何技術可以實現(xiàn)這一點,于是百度2016-01-11- 這個仿163網(wǎng)盤無刷新文件上傳系統(tǒng),并沒有用使用控件,完全的手工制作。 本來覺得這個系統(tǒng)會很復雜,但把每個部分都分析清楚后,其實需要的技術并不高。不過當我把各個功2008-11-10
HTML網(wǎng)頁中無刷新的更換CSS樣式-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
系統(tǒng)原來的更換CSS模板是要重新刷新一下兒頁面的,我一直都對這個功能很不滿意,百分之九十五的功能都用AJAX無刷新的實現(xiàn)了,難道要在這個小小的更換頁面CSS模板上給用戶添2008-10-17- 這篇文章主要介紹了HTML5實現(xiàn)無刷新修改URL的方法,需要的朋友可以參考下2019-11-14