通常对于无刷新提交表单，我们都是运用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. C#的正则表达式

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  2. Cash Cow【dfs较难题应用】【sdut2721】

    Cash Cow Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdut ...

  3. SSH入门简单搭建例子

    因为公司涉及项目使用SSH,为了解SSH搭建方式和运作原理,就自己搭建了一个. 采用尽量以最少的JAR包,搭建一个简单的struts2+spring+hibernate环境,希望像我这样的入门者都能理 ...

  4. dbca：Exception in thread "main" java.lang.UnsatisfiedLinkError: get

    在64位的操作系统安装oracle10g 软件安装完成后,使用dbca建库的时候报下面的错: $ dbcaUnsatisfiedLinkError exception loading native l ...

  5. VC++中字符串编码的转换

    在以前VC++6.0中默认的字符集是多字节字符集(MBCS:Multi-Byte Character Set),而VS2005及以后默认的字符集是Unicode,这样导致以前在VC6.0中非常简单实用 ...

  6. WPF 自定义Metro Style窗体

    为了使WPF程序在不同版本的操作系统上保持一致的显示效果,我们需要重写WPF控件样式.这篇博客将展示如何创建一个Metro Style的WPF窗体. 首先先看一下最终窗体的效果图, 通过截图我们可以看 ...

  7. C#屏幕截图

    今天通过C#来实现一个简单的屏幕截图功能.实现思路,获取鼠标按下去的位置和鼠标左键释放的位置,计算这个区域的宽度和高度.然后通过 Graphics.CopyFromScreen 方法便可以获取到屏幕截 ...

  8. ASP.NET 5探险（2）：上传文件

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:在ASP.NET 5(MVC 6)中处理上传文件的方式和之前有所不同. 在MVC 5之 ...

  9. 设置SecureCRT会话的缓冲区大小

    转自:http://blog.csdn.net/imxiangzi/article/details/7457703 在使用SecureCRT操作设备时,默认的回滚行数为500行.可以通过打开[选项]- ...

  10. C# 对象转换为byte[] ，byte[]还原对象

    /// <summary>  /// 将一个object对象序列化,返回一个byte[]          /// </summary>  /// <param name ...