基于HTML实现表单提交后不刷新页面

所属分类：网页制作 / HTML/Xhtml 阅读数： 573

收藏 0赞 0分享

使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种：
（html页面）

HTML Code复制内容到剪贴板

<!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 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页面）

HTML Code复制内容到剪贴板

<!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）

XML/HTML Code复制内容到剪贴板

<?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实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！

更多精彩内容其他人还在看

XHTML入门学习教程:XHTML超级链接

超级链接<a>标签毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对<a></a>标签即可：

收藏 0赞 0分享

网页制作解惑:图象文件的路径

本文属于网页教学网闪电儿原创，转载可以去掉这句话，但是不要以任何借口或方式更改文章的内容，否则后果自负！转载请注明作者和出处。很久以前一直到现在，有好多网友问过我类似的问题，尤其是拷贝了本站的一些图形图像特效代码后，总是图片显示不出来等问题出现，在这

收藏 0赞 0分享

HTML教程,简单学习HTML语言

1、<body background=图片文件名 bgcolor=颜色 text=颜色 link=颜色 vlink=颜色 alink=颜色>...</body>标记属性： background:设置网页的背景图像。bgcolor:设置网页的背景颜色。

收藏 0赞 0分享

HTML基础:HTML的基本结构

HTML的基本结构　　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 <HTML> 　　　<HEAD> 　　　　　　头部信息　　　</HEAD>

收藏 0赞 0分享

HTML教程,认识optgroup元素

select的分类选择,经测试IE和FF都能很好的支持该元素 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S

收藏 0赞 0分享

网页输入框的样式触发效果

　　这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu 一下明白了，onblur 是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名

收藏 0赞 0分享

HTML教程,HTML默认样式

html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4,

收藏 0赞 0分享

超链接打开目标(target)的测试

链接的target属性决定了链接在哪边打开，它的值通常为以下五种：_blank、_self、_parent、_top和自定义，依次表示为：新窗口、当前窗口、父窗口、顶层窗口和框架。当所指名称的框架不存在时，自定义作用等同于_blank。今天我们主要测试一下当所指名称的框架处于不同

收藏 0赞 0分享

HTML优化加快网页速度

明显HTML，暗渡“公用脚本” 减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件，然后再在页面中按如下

收藏 0赞 0分享

XHTML教程,简单认识XHTML基础知识

　　本文简单让大家认识一下XHTML,了解XHTML的基础知识什么是XHTML 　　XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XM

收藏 0赞 0分享

基于HTML实现表单提交后不刷新页面

XHTML入门学习教程:XHTML超级链接

网页制作解惑:图象文件的路径

HTML教程,简单学习HTML语言

HTML基础:HTML的基本结构

HTML教程,认识optgroup元素

网页输入框的样式触发效果

HTML教程,HTML默认样式

超链接打开目标(target)的测试

HTML优化加快网页速度

XHTML教程,简单认识XHTML基础知识

网络赚钱

站长故事