HTML无刷新提交表单

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

第一种:

(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="登录" />

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

 

你可能感兴趣的:(html)