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

使用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;      
      }     
 



  第二种：   
 （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://HdhCmsTestbaidu测试数据"  ;      
      }      
      }      
      }      
      </script>      
      </body>      
      </html>     
 


 （PHP页面：form.php）  

 
 XML/HTML Code  复制内容到剪贴板 

 
       <?  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;    
 

 以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！ 

      查看更多关于基于HTML实现表单提交后不刷新页面的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37554
更新时间：2022-09-23 阅读：47次