DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 基於HTML實現表單提交後不刷新頁面
基於HTML實現表單提交後不刷新頁面
編輯：HTML和Xhtml     
使用ajax實現表單提交無刷新頁面在項目中經常會用到。前一段時間跟著師傅學到了另外幾種無刷新提交表單的方法，主要是基於iframe框架實現的。現在整理出來分享給大家。
第一種：
（html頁面）
HTML Code復制內容到剪貼板
  1. <!DOCTYPE HTML>    
  2. <html lang="en-US">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>無刷新提交表單</title>    
  6. <style type="text/css">    
  7. ul{ list-style-type:none;}    
  8. </style>    
  9. </head>    
  10. <body>    
  11. <iframe name="formsubmit" style="display:none;">    
  12. </iframe>    
  13. <!-- 將form表單提交的窗口指向隱藏的ifrmae,並通過ifrmae提交數據。 -->    
  14. <form action="form.php" method="POST" name="formphp" target="formsubmit">    
  15. <ul>    
  16. <li>    
  17. <label for="uname">用戶名：</label>    
  18. <input type="text" name="uname" id="uname" />    
  19. </li>    
  20. <li>    
  21. <label for="pwd">密 碼：</label>    
  22. <input type="password" name="pwd" id="pwd" />    
  23. </li>    
  24. <li>    
  25. <input type="submit" value="登錄" />    
  26. </li>    
  27. </ul>    
  28. </form>    
  29. </body>    
  30. </html>    
  31.   
  32. （PHP頁面：form.php）    
  33.   
  34. <?php    
  35. //非空驗證    
  36. if(empty($_POST['uname']) || empty($_POST['pwd']))    
  37. {    
  38. echo '<script type="text/javascript">alert("用戶名或密碼為空!");</script>';    
  39. exit;    
  40. }    
  41. //驗證密碼    
  42. if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')    
  43. {    
  44. echo '<script type="text/javascript">alert("用戶名或密碼不正確!");</script>';    
  45. exit;    
  46. } else {    
  47. echo '<script type="text/javascript">alert("登錄成功!");</script>';    
  48. exit;    
  49. }   


第二種：
（html頁面）

HTML Code復制內容到剪貼板
  1. <!DOCTYPE HTML>    
  2. <html lang="en-US">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>iframe提交表單</title>    
  6. </head>    
  7. <body>    
  8. <iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>    
  9. <form action="form.php" target="myiframe" method="POST">    
  10. 用戶名:<input type="text" name="username" /><br/>    
  11. 密 碼:<input type="password" name="userpwd" /><br/>    
  12. <input type="submit" value="登錄" />    
  13. </form>    
  14. <script type="text/javascript">    
  15. function iframeLoad(iframe){    
  16. var doc = iframe.contentWindow.document;    
  17. var html = doc.body.innerHTML;    
  18. if(html != ''){    
  19. //將獲取到的json數據轉為json對象    
  20. var obj = eval("("+html+")");    
  21. //判斷返回的狀態    
  22. if(obj.status < 1){    
  23. alert(obj.msg);    
  24. }else{    
  25. alert(obj.msg);    
  26. window.location.href="http://www.baidu.com";    
  27. }    
  28. }    
  29. }    
  30. </script>    
  31. </body>    
  32. </html>   

（PHP頁面：form.php）

XML/HTML Code復制內容到剪貼板
  1. <?php    
  2. //設置時區    
  3. date_default_timezone_set('PRC');    
  4. /*    
  5. 返回的提交消息    
  6. status:狀態    
  7. msg:提示信息    
  8. */    
  9. $msg = array('status'=>0,'msg'=>'');    
  10. //獲取提交過來的數據    
  11. $name = $_POST['username'];    
  12. $pwd = $_POST['userpwd'];    
  13. //模擬登錄驗證    
  14. $user = array();    
  15. $user['name'] = 'jack';    
  16. $user['pwd'] = 'jack2014';    
  17. if($name != $user['name']){    
  18. $msg['msg'] = '該用戶未注冊!';    
  19. $str = json_encode($msg);    
  20. echo $str;    
  21. exit;    
  22. }else if($pwd != $user['pwd']){    
  23. $msg['msg'] = '輸入的密碼錯誤!';    
  24. $str = json_encode($msg);    
  25. echo $str;    
  26. exit;    
  27. }    
  28. $msg['msg'] = '登錄成功!';    
  29. $msg['status'] = 1;    
  30. $str = json_encode($msg);    
  31. echo $str;  

以上內容是小編給大家介紹的基於HTML實現表單提交後無刷新頁面的相關內容，希望對大家有所幫助！

HTML和Xhtml
HTML元素 noscript使用介紹
noscript定義和用法noscript 元素用來定義在腳本未被執行時的替代內容（文本）。此標簽可
展示網站特色：大字體的網頁設計風格
原文：網頁中的大字體設計譯自：55 Examples of Huge Typography in W
HTML表格標記教程(36):表頭的背景色屬性BGCOLOR
<TH>標記用於設定表格中某一表頭的屬性。見下表所示： 表頭的<th>標記屬

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
base標簽是什麼及其作用介紹 13個應用HTML5和CSS3實現的Web效果 Iframe和FRAME的區別分析 淺析html 空格代碼 HTML5教程:HTML5 Canvas的文本對齊 W3C發布7個HTML工作草案 初學者接觸HTML了解一些HTML標記(3) 關於html標簽自定義屬性的問題 設計一個提示用戶登錄錯誤的表單 HTML5+CSS3實例教程:繪制遨游浏覽器Logo
熱門推薦
HTML九宮格布局實現方法 Form表單的action和onSubmit示例介紹 HTML表格標記教程(6):暗邊框色屬性BORDERCOLORDARK 表格標簽（table）深入了解 html中塊注釋的使用詳細介紹 基於HTML實現多圖上傳預覽功能 checkbox的indeterminate屬性使用介紹 在Firefox或IE中span無法確定寬度的解決方案 Html中使用自定義圖片來實現checkbox顯示的方法
大家都在看
JQuery+DIV自定義滾動條樣式的具體實現 JS中innerHTML和pasteHTML的區別實例分析 兼容IE、FireFox、Chrome等浏覽器的xml處理函數js代碼 JS實現隨機亂撞彩色圓球特效的方法 js replace 與replaceall實例用法詳解 W3C教程(9):W3C XPath 活動 網頁布局設計:使用數學中的模數精確布局 12 款 JS 代碼測試必備工具(翻譯)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved