HTML无刷新提交表单 - jerrylsxu

通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法，是利用iframe框架实现的。现在整理出来分享给大家。

第一种：

（html页面）

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-US"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>无刷新提交表单<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        ul</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> list-style-type</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">iframe </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="formsubmit"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none;"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span>
    <br>    <!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->
    <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="form.php"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="POST"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="formphp"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="formsubmit"</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="uname"</span><span style="color: #0000ff;">></span>用户名：<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="uname"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="uname"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="pwd"</span><span style="color: #0000ff;">></span>密  码：<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="pwd"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="登录"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

（PHP页面：form.php）

<span style="color: #000000;">php
  </span><span style="color: #008000;">//</span><span style="color: #008000;">非空验证</span>
  <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">empty</span>(<span style="color: #800080;">$_POST</span>['uname']) || <span style="color: #0000ff;">empty</span>(<span style="color: #800080;">$_POST</span>['pwd'<span style="color: #000000;">]))
  {
    </span><span style="color: #0000ff;">echo</span> '<script type="text/javascript">alert("用户名或密码为空!");</script>'<span style="color: #000000;">;
    </span><span style="color: #0000ff;">exit</span><span style="color: #000000;">;
  }
  
  </span><span style="color: #008000;">//</span><span style="color: #008000;">验证密码</span>
  <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$_POST</span>['uname'] != 'jack' || <span style="color: #800080;">$_POST</span>['pwd'] != '123456'<span style="color: #000000;">)
  {
    </span><span style="color: #0000ff;">echo</span> '<script type="text/javascript">alert("用户名或密码不正确!");</script>'<span style="color: #000000;">;
    </span><span style="color: #0000ff;">exit</span><span style="color: #000000;">;
  } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
    </span><span style="color: #0000ff;">echo</span> '<script type="text/javascript">alert("登录成功!");</script>'<span style="color: #000000;">;
    </span><span style="color: #0000ff;">exit</span><span style="color: #000000;">;
  }
  
  </span>

 

第二种：

（html页面）

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-US"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>iframe提交表单<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">iframe </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="myiframe"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none;"</span><span style="color: #ff0000;"> onload</span><span style="color: #0000ff;">="iframeLoad(this);"</span><span style="color: #0000ff;">></span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="form.php"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="myiframe"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="POST"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
      用户名:</span><span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span> <span style="color: #0000ff;">/><span style="color: #800000;">br</span><span style="color: #0000ff;">/></span><span style="color: #000000;">
      密 码:</span><span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userpwd"</span> <span style="color: #0000ff;">/><span style="color: #800000;">br</span><span style="color: #0000ff;">/></span>
      
      <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="登录"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
    
    <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span>
     <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> iframeLoad(iframe){
        </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> doc </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> iframe.contentWindow.document;
        </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> html </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> doc.body.innerHTML;
        </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(html </span><span style="background-color: #f5f5f5; color: #000000;">!=</span> <span style="background-color: #f5f5f5; color: #000000;">''</span><span style="background-color: #f5f5f5; color: #000000;">){
          </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">将获取到的json数据转为json对象</span>
          <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> obj </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> eval(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">html</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">)</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
          </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">判断返回的状态</span>
          <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(obj.status </span><span style="background-color: #f5f5f5; color: #000000;"> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">){
            alert(obj.msg);
          }</span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;">{
            alert(obj.msg);
            window.location.href</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">http://www.baidu.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
          }
        }
     }
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

（PHP页面：form.php）

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