1. 首页
  2. 文章中心
  3. HTML/Xhtml

基于HTML实现表单提交后不刷新页面

163 阅读 0 评论
我是靠谱客的博主 现实路灯，最近开发中收集的这篇文章主要介绍基于HTML实现表单提交后不刷新页面 ，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用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实现表单提交后不刷新页面 的全部内容，希望文章能够帮你解决基于HTML实现表单提交后不刷新页面 所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(108)

相关文章

MAYA制作超漂亮的华丽光效
MAYA制作超漂亮的华丽光效
MySQL中实现插入或更新操作（类似Oracle的merge语句）
MySQL中实现插入或更新操作（类似Oracle的merge语句）
将MySQL从MyISAM转换成InnoDB错误和解决办法
将MySQL从MyISAM转换成InnoDB错误和解决办法
网赚骗局 网赚培训能够日赚百元你相信吗
网赚骗局 网赚培训能够日赚百元你相信吗
基于HTML实现表单提交后不刷新页面
基于HTML实现表单提交后不刷新页面
CentOS系统下尝试恢复被删除的文件的方法集锦
CentOS系统下尝试恢复被删除的文件的方法集锦
Flex DataGrid 伪合并单元格思路及代码
Flex DataGrid 伪合并单元格思路及代码
inWatch T手表发布 搭载腾讯TOS系统
inWatch T手表发布 搭载腾讯TOS系统

评论列表共有 0 条评论

立即
投稿
返回
顶部