返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-15 09:31:00王旭
使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种：
（html页面）
HTML Code复制内容到剪贴板
  • <!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;    
  • }   
    • 相关文章 大家在看