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