• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 基于HTML实现表单提交后不刷新页面

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含提交表单不刷新页面,,html无刷新提交表单等相关知识,佚名 希望在学习及工作中可以帮助到您
使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种:
(html页面)

  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页面)

  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=

您可能想查找下面的文章:

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

相关文章

  • 2017-08-05表单文件选择框样式自定义示例
  • 2017-08-05html中使用margin:0 auto整个页面不居中的解决方法
  • 2017-08-05html滚动条 textarea属性设置
  • 2017-08-05利用HTML、CSS 实现带表情的评论框的制作教程
  • 2017-08-05HTML 网页头部代码全清楚
  • 2017-08-05HTML对于元素水平垂直居中的探讨
  • 2017-08-05input标签里面的name与value的区别
  • 2017-08-05W3C教程(6):W3C CSS 活动
  • 2017-08-05最常用的HTML转义字符 Escape Sequence
  • 2017-08-05html中锚标记用法实例分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • XHTML三种文件类型声明
    • html的table用法(让网页的视觉效果显示出来)
    • 如何使用图片按钮作为重置(reset)表单按钮
    • HTML标签tbody的用法与说明
    • 设置disabled属性后台读不到数据如何让select支持readonly
    • 详解HTML/XHTML中img图像标签的基本用法
    • 用简单的jquery+CSS创建自定义的a标签title提示tooltip
    • 通过html为FLASH加链接的实现代码(div层)
    • Readonly和Disabled之间的微小区别详解
    • Iframe和FRAME的区别分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有