通常对于无刷新提交表单，我们都是运用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. 无废话Android之listview入门,自定义的数据适配器、采用layoutInflater打气筒创建一个view对象、常用数据适配器ArrayAdapter、SimpleAdapter、使用ContentProvider（内容提供者）共享数据、短信的备份、插入一条记录到系统短信应用（3）

    1.listview入门,自定义的数据适配器 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and ...

  2. Algorithms, Part I by Kevin Wayne, Robert Sedgewick

    Welcome to Algorithms, Part I 前言 昨天在突然看到了Coursera上Robert Sedgewick讲的Algorithms,Part II看了一些,甚是爽快,所以又去 ...

  3. 【译】DotNet 5.4或者说 .NET平台标准

    原文:DotNet 5.4 or .NET Platform Standards 是的,你看到的确实是"DotNet 5.4".使用Visual Studio 2015 RC1 u ...

  4. ASP.NET WebApi Document Helper

    本项目实现了ASP.NET WebApi 接口文档的自动生成功能. 微软出的ASP.NET WebApi Help Page固然好用,但是我们项目基于Owin 平台的纯WebApi 项目,不想引入MV ...

  5. hdu 4007 暴力or线段树 ***

    尼玛,INF不能定义太大,找标程对拍了好久 #include<cstdio> #include<iostream> #include<algorithm> #inc ...

  6. C语言基本点初探

    1,对于int a=10++;此语句错误,为什么呢,对于i++来说,i是一个变量,是把i加1然后赋值给i,然而10不是一个变量所以无法执行加加的语法; 2,运算符的优先级: 赋值运算符<逻辑运算 ...

  7. 智能车学习（三）—— ADC学习

    一.代码分享: 1.ADC头文件 #ifndef ADC_H_ #define ADC_H_ #include "common.h" typedef enum { // ----- ...

  8. ontouchstart

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  9. pig的各种运行模式与运行方式详解

    一.pig的运行模式: Pig 有两种运行模式: Local 模式和 MapReduce 模式.当 Pig 在 Local 模式运行的时候, Pig 将只访问本地一台主机:当 Pig 在 MapRed ...

  10. eclipse文本域内只能输入繁体中文

    背景:在文本编辑器下写纯文本时不知怎么回事儿,原来能输入简体字,但过了之后只能输入繁体中文了!我用的是sogou拼音输入法,我检查过,输入法设置的是简体中文,eclipse默认的编码方式是utf-8. ...