通常对于无刷新提交表单，我们都是运用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无刷新提交表单的更多相关文章

  1. iframe实现面页无刷新提交表单

    一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...

  2. 使用iframe实现页面无刷新提交表单

    iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. ...

  3. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. Jquery Ajax自定义无刷新提交表单Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  5. 不使用ajax,无刷新提交表单

    <form action="form_action.asp" method="get" onsubmit"check_form()" ...

  6. js无刷新提交表单

    $("#form1").attr("target", "frameFile"); $("#form1").submit( ...

  7. 无刷新提交表单(非Ajax实现)

    HTML代码: <iframe id="fra" name="frm" style="display: none;"></ ...

  8. ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...

  9. axios页面无刷新提交from表单

    页面部分大概意思一下 <form method="post" enctype="multipart/form-data"> ... </for ...

随机推荐

  1. wifi 4次握手

    转自:http://zhaoxiaobu.blog.51cto.com/878176/407130/ 不管是用WEP加密,还是用WPA,一般如果我们要和AP建立一个连接,要经过两个阶段认证(Authe ...

  2. 在线预览Office文件【效果类似百度文库】（转载）

    转载地址:http://www.cnblogs.com/sword-successful/p/4031823.html 引言 结合上个项目和目前做的这个项目,其中都用到了Office文件在线预览,目前 ...

  3. poj 3278:Catch That Cow（简单一维广搜）

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 45648   Accepted: 14310 ...

  4. android 入门-android Studio 快捷输入

    1.输入 log的时候按一下Tab.就会打出 private static final String TAG="Settings"; 2. shift +alt+x 运行 shif ...

  5. Python3 基本数据类型注意事项

    Python3 基本数据类型 教程转自菜鸟教程:http://www.runoob.com/python3/python3-data-type.html Python中的变量不需要声明.每个变量在使用 ...

  6. maven项目Tomcat controller 404

    今天使用tomcat7.0.54启动现有的maven项目,可以正常启动,但是自己所写的所有的@controller注解的请求都报出了404的错误,在网上查了好久也很少找到这个问题,各种方法都尝试了也没 ...

  7. UED

    User Experience Design(用户体验设计),简称UED.UED是进行产品策划的主力之一,他们用自己的知识.经验.设计能力拿出设计方案. UED不只是互联网专家,还是行业专家.能够用自 ...

  8. springMVC核心配置文件样例

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. Spark Streaming容错的改进和零数据丢失

    本文来自Spark Streaming项目带头人 Tathagata Das的博客文章,他现在就职于Databricks公司.过去曾在UC Berkeley的AMPLab实验室进行大数据和Spark  ...

  10. Nginx+Resin实现高性能JAVA平台搭建

    现在流行的JavaEE容器有很多:Tomcat.Resin.JBoss.Glassfish等,我们常用的主要是前三种,那这个java容器性能方面到底谁更稳定,并发能力更强呢?那当属resin了,res ...