通常对于无刷新提交表单，我们都是运用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. 【数据库】 防止sql注入,过滤敏感关键字

    private bool FilterIllegalChar(string sWord) { var result = false; var keyWord = @"select|inser ...

  2. 在ubuntu上搭建开发环境9---Ubuntu删除ibus出现的问题及解决

    删除 ibus输入法: sudo apt-get install ibus 我们会遇到下面的问题 Ubuntu 14.04 系统设置很多选项消失. 其实遇到这个问题的一个最主要的原因是之前执行过卸载i ...

  3. Delphi中的基础数据类型

    参考http://www.cnblogs.com/del/archive/2007/12/04/982167.html 在学习之初,在这么多的数据类型中,最好记住这五种标准数据类型(整型.实型.字符型 ...

  4. linux 下解压rar文件

    今天遇到要在linux 服务器上解压几个rar 文件的问题,rar似乎是win 专属的压缩格式,所以linux 原生工具链中并没有支持rar 解压的工具.经过一系列搜索确定了一个脚linuxrar 的 ...

  5. [Maven] Missing artifact （解决办法）

    在使用Eclipse的Maven插件时,经常会遇到Missing artifact的编译错误,特别是在新环境中搭建相关项目时,经常出现类似此问题,今天一位同事又遇到了,经过一顿问题原因查找,始终无法解 ...

  6. excel、csv、txt文件数据读取

    /// <summary> /// 读取Excel表每一行第一列的字符串集合 /// </summary> /// <param name="filePath& ...

  7. Codeforces Round#250 D. The Child and Zoo(并差集）

    题目链接:http://codeforces.com/problemset/problem/437/D 思路:并差集应用,先对所有的边从大到小排序,然后枚举边的时候,如果某条边的两个顶点不在同一个集合 ...

  8. hdu 3183（贪心）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3183 思路:比较前后两个相邻的字符,如果前面一个字符大于后面一个字符,就把它去掉. #include ...

  9. zTree学习文档和DEOM

    http://tool.oschina.net/apidocs/apidoc?api=ztree3.2%2Fapi%2FAPI_cn.html zTree的API http://www.ztree.m ...

  10. UML 之 四种关系

    学习过UML的人都知道,UML之中有九种图和四种关系,今天,我们先来介绍一下这四种关系: 对于我们这些初学者来说,UML之中无非是  关联.依赖.泛化和实现,但是其中,关联和依赖又如何区分?泛化又如何 ...