告别AJAX实现无刷新提交表单

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

第一种:

(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页面)

代码如下:

<?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;
  }

(0)

相关推荐

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • 不使用ajax实现无刷新提交表单

    HTML代码: 复制代码 代码如下: <iframe id="fra" name="frm" style="display: none;"></iframe> <form id="frm" method="post" action="@Url.Content("~/Backstage/MachineMng/RoadSet/SaveTrackRoad"

  • 将form表单通过ajax实现无刷新提交的简单实例

    实例如下: //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //将form中的值转换为键值对 function getFormJson(frm){ var o={}; var a=$(frm)

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • 告别AJAX实现无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法.现在整理出来分享给大家. 第一种: (html页面) 复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>无刷新提交表单</title>    <style type

  • ajax(iframe)无刷新提交表单、上传文件

    找遍资料得出结果:不能 不过同时也找到了解决办法,就是用iframe的方式来提交表单,即实现无刷新提交表单又可以上传文件! 一.HTML代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

  • AJAX PHP无刷新form表单提交的简单实现(推荐)

    ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取

  • 发布三个ajax相关的函数,包括无刷新提交表单等

    几个月前,因为项目需求,我写了下面的三个ajax相关的函数.发布出来和大家分享.第一个是用来无刷新加载一段HTML第二个是把表单数据转换成一串请求字符串第三个是结合函数一和函数二的无刷新提交表单实现. 还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置.目前无刷新的上传,一般是用iframe来实现的.关于这个,我们在google里搜索能找到很多. 网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了.可以

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

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

  • php HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: html页面 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type=&quo

  • 纯javascript的ajax实现php异步提交表单的简单实例

    很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam

随机推荐