首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / HTML/Xhtml 阅读数： 605
收藏 0 赞 0 分享
使用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实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！

更多精彩内容其他人还在看

Table相关整理及Javascript操作table,tr,td

很多人都有这种经历：当某个td中没有内容或者没有可见元素时，td的border也会消失。本文将给出解决方案，感兴趣的朋友可以了解下，或许本文对你有所帮助
收藏 0 赞 0 分享

td 内容自动换行 table表格td设置宽度后文字太多自动换行

table表格td设置宽度后文字太多导致自动换行，这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的，可以参考下本文，可能会有意外的收获
收藏 0 赞 0 分享

html4和html5区别之如何在一个input上添加焦点实现代码

如何在一个input上添加焦点,有很多的实现方法，本文分别用html4和html5做了下演示，感兴趣的朋友可以参考下，或许本文对你有所帮助
收藏 0 赞 0 分享

纯css为select添加样式(无脚本)实现

改变select默认的样式，一般情路情况下通过ul,li来模拟来实现;Jquery插件也是这样,接下来介绍一种不写脚本，只用单纯的css来实现。在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug，感兴趣的朋友可以参考下啊
收藏 0 赞 0 分享

iframe的src赋值问题(服务器端)

frame的src赋值的问题，本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID，再加上runat=server，感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

iframe的src设置为about:blank之后细节探讨

不设置为about:blank，内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空，本文将详细探讨一下iframe的src设置为about:blank之后细节，感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

无法定义IE6字体：13px大小无效，IE6自动显示更大的字体的解决方法

前些天调整网页一个模块的时候将页面字体的大小设置为13px大小了，由于当时用的是Chrome浏览器以及IE8，并没有发现原来font-size:13px在IE6下居然不听使唤总是自动显示为一个更大的大小，变现上又及其难看
收藏 0 赞 0 分享

为何html中嵌入mp4格式视频播放不了

只是在页面中加载了一个播放器的样子，各个按钮都不管用，不知道是哪个地方出了问题，很是郁闷，于是搜集整理下，拿出来和大家分享，希望可以帮助你们
收藏 0 赞 0 分享

如何把select下拉框的值传到id中实现代码

把select下拉框的值传到id中,是网友们比较在意的问题，本人搜索整理下，晒出来和大家分享
收藏 0 赞 0 分享

怎么把select下拉菜单里的文字设置成左右滚动效果

希望用marquee标签来设置字体滚动，代码是下面这样写的，但是没有效果，字体还是不会滚动，应该怎么来写，才会实现这个效果呢
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22