使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种：
（html页面）
HTML Code
1.<!DOCTYPE HTML>
2.<html lang="en-US">
3.<head>
4.<meta charset="utf-8">
5.<title>无刷新提交表单</title>
6.<style type="text/css">
7.ul{ list-style-type:none;}
8.</style>
9.</head>
10.<body>
11.<iframe name="formsubmit" style="display:none;">
12.</iframe>
13.<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->
14.<form action="form.php" method="POST" name="formphp" target="formsubmit">
15.<ul>
16.<li>
17.<label for="uname">用户名：</label>
18.<input type="text" name="uname" id="uname" />
19.</li>
20.<li>
21.<label for="pwd">密 码：</label>
22.<input type="password" name="pwd" id="pwd" />
23.</li>
24.<li>
25.<input type="submit" value="登录" />
26.</li>
27.</ul>
28.</form>
29.</body>
30.</html>
31.
32.（PHP页面：form.php）
33.
34.<?php
35.//非空验证
36.if(empty($_POST['uname']) || empty($_POST['pwd']))
37.{
38.echo '<script type="text/javascript">alert("用户名或密码为空!");</script>';
39.exit;
40.}
41.//验证密码
42.if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')
43.{
44.echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>';
45.exit;
46.} else {
47.echo '<script type="text/javascript">alert("登录成功!");</script>';
48.exit;
49.}
第二种：
（html页面）
HTML Code
1.<!DOCTYPE HTML>
2.<html lang="en-US">
3.<head>
4.<meta charset="utf-8">
5.<title>iframe提交表单</title>
6.</head>
7.<body>
8.<iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>
9.<form action="form.php" target="myiframe" method="POST">
10.用户名:<input type="text" name="username" /><br/>
11.密 码:<input type="password" name="userpwd" /><br/>
12.<input type="submit" value="登录" />
13.</form>
14.<script type="text/javascript">
15.function iframeLoad(iframe){
16.var doc = iframe.contentWindow.document;
17.var html = doc.body.innerHTML;
18.if(html != ''){
19.//将获取到的json数据转为json对象
20.var obj = eval("("+html+")");
21.//判断返回的状态
22.if(obj.status < 1){
23.alert(obj.msg);
24.}else{
25.alert(obj.msg);
26.window.location.href="http://www.baidu.com";
27.}
28.}
29.}
30.</script>
31.</body>
32.</html>
（PHP页面：form.php）
XML/HTML Code
1.<?php
2.//设置时区
3.date_default_timezone_set('PRC');
4./*
5.返回的提交消息
6.status:状态
7.msg:提示信息
8.*/
9.$msg = array('status'=>0,'msg'=>'');
10.//获取提交过来的数据
11.$name = $_POST['username'];
12.$pwd = $_POST['userpwd'];
13.//模拟登录验证
14.$user = array();
15.$user['name'] = 'jack';
16.$user['pwd'] = 'jack2014';
17.if($name != $user['name']){
18.$msg['msg'] = '该用户未注册!';
19.$str = json_encode($msg);
20.echo $str;
21.exit;
22.}else if($pwd != $user['pwd']){
23.$msg['msg'] = '输入的密码错误!';
24.$str = json_encode($msg);
25.echo $str;
26.exit;
27.}
28.$msg['msg'] = '登录成功!';
29.$msg['status'] = 1;
30.$str = json_encode($msg);
31.echo $str;
以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
