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

2019-01-15 09:31:00王旭


第二种:
(html页面)

HTML Code复制内容到剪贴板
  • <!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="登录" />    
  • </form>     <script type="text/javascript">    
  • function iframeLoad(iframe){     var doc = iframe.contentWindow.document;    
  • var html = doc.body.innerHTML;     if(html != ''){    
  • //将获取到的json数据转为json对象     var obj = eval("("+html+")");    
  • //判断返回的状态     if(obj.status < 1){    
  • alert(obj.msg);     }else{    
  • alert(obj.msg);     window.location.href="http://www.baidu.com";    
  • }     }    
  • }     </script>    
  • </body>     </html>   

    (PHP页面:form.php)

  • <?php     //设置时区    
  • date_default_timezone_set('PRC');     /*    
  • 返回的提交消息     status:状态    
  • msg:提示信息     */    
  • $msg = array('status'=>0,'msg'=>'');     //获取提交过来的数据    
  • $name = $_POST['username'];     $pwd = $_POST['userpwd'];    
  • //模拟登录验证     $user = array();    
  • $user['name'] = 'jack';     $user['pwd'] = 'jack2014';    
  • if($name != $user['name']){     $msg['msg'] = '该用户未注册!';    
  • $str = json_encode($msg);     echo $str;    
  • exit;     }else if($pwd != $user['pwd']){    
  • $msg['msg'] = '输入的密码错误!';     $str = json_encode($msg);    
  • echo $str;     exit;    
  • }     $msg['msg'] = '登录成功!';    
  • $msg['status'] = 1;     $str = json_encode($msg);    
  • echo $str;